Question

我是Vue.js的新手，我正在尝试根据下面的代码创建一个示例组件，但最终得到"[Vue warn]: Error when rendering component <my-tag>: "我已经查看了stackoverflow以查找之前提出的类似问题，但这没有帮助。组件的代码如下：

Vue.component('my-tag', {
  props: ['myTagAttr'],
  template: '<span>{{myTagAttr.text}}</span>'
})

var data = {
  myTagAttrVal: {
    text: 'foobar',
    color: 'Red'
  }
}

var vm = new Vue({
  el: '#demo',
  data: data
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>

<body>

  <span id='demo'>   
    <my-tag v-bind:myTagAttr='myTagAttrVal'></my-tag>
  </span>

</body>

</html>

或者，可以在JSbin

找到代码

Answer 1

HTML属性不区分大小写，因此在使用非字符串模板时，camelCased道具名称需要使用 kebab-case（连字符分隔）等效项：

<my-tag v-bind:my-tag='myTagAttrVal'></my-tag>

这是一个工作小提琴：https://jsfiddle.net/nxcbm6na/

您可以在文档中找到详细信息

https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

在Vue.js中渲染组件时出错

1 个答案: