Vue.js组件渲染报错求助：自定义组件渲染出现警告

嘿，刚看了你的代码和问题，作为Vue新手遇到这个渲染警告很正常，咱们一步步来排查：

可能的问题1：组件使用时未正确绑定props #

你定义的组件prop是myTagAttr，但在HTML模板里使用组件时，Vue要求驼峰命名的prop要转成短横线分隔的形式，而且必须用v-bind（或简写:）来绑定数据，不然会把值当成字符串而不是引用data里的对象。

比如你在页面里的组件标签应该是这样的：

<div id="demo">
  <my-tag :my-tag-attr="myTagAttrVal"></my-tag>
</div>

如果直接写<my-tag my-tag-attr="myTagAttrVal">，那myTagAttr会是字符串"myTagAttrVal"，而不是你data里的对象，自然访问.text就会报错。

可能的问题2：Vue实例的data传递不完整 #

你代码最后写的是data: da...，应该是笔误，要写成data: data或者直接把data对象写进去，确保Vue实例能正确拿到数据：

var vm = new Vue({
  el: '#demo',
  data: data // 这里要补全，不能只写da...
})

额外的安全处理：给prop加默认值避免undefined报错 #

为了防止没传递prop时出现警告，你可以给myTagAttr设置一个默认值，这样即使没传值，组件也不会报错：

Vue.component('my-tag', {
  props: {
    myTagAttr: {
      type: Object,
      default: () => ({ text: '' }) // 对象类型的默认值要返回一个函数
    }
  },
  template: '<span>{{myTagAttr.text}}</span>'
})

你可以先检查这几点，尤其是组件的绑定方式，这是新手最容易踩的坑～

内容的提问来源于stack exchange，提问作者kryptoatom