[Vue warn]: Property or method “boboya“ is not defined on the instance ...报错已解决

项目场景：

[Vue warn]: Property or method "boboya" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

---

问题描述：

vue父组件给子组件传不了字符串，而且报错

 <category  v-bind:src="boboya.png"  :sort='121' ></category>

 Vue.component('category',{
        props:['src','sort'],

        template:`
        <div class="category-info">
			<h3 class="category-name b-category-name">
                 <i><img :src="src"></i>
                {{sort}}                
            </h3>
		    <em>&gt;</em>
        </div>`,
        data: function () {
            console.log(this.sort);
            console.log(this.src);
            return {
              data: 5345,
            }
        }
    });

---

原因分析：

监听的是一个对象，传的 东西默认为是个对象（我们想传的其实是个值 boboya.png），而又未定义，所以报错。直接传数字又不会报错，可能是数字默认自动转换了吧

---

解决方案：

1，在vue实例化的过程中添加该对象和值

new Vue({
        el:"#category",//绑定的自定义组件的父元素id,<div id="category">
        data:{
            image:"boboya.png",
        }
)};

<category  v-bind:src=image  :sort='121' ></category>

2，在调用子组件时添加对象（我用的数组）

	<category  v-bind:src=["boboya.png"]  :sort='121' ></category>