前面看官方文档一直不能理解在子组件模板中引用父组件的数据,看了很多遍也是模糊,今天无意中看到一个demo,突然就明白了一些。
<div id="componentPhone"> <!--在子组件模板中引用父组件的数据,数据是article,通过绑定的detail属性--> <my-component v-bind:detail="article"></my-component>
</div>
var cp = new Vue({ el:"#componentPhone", data:{ article:{ title:"雄鹰展翅", content:"实现自我价值", date:"20180109", is_original:true } }, components:{ ‘my-component‘:{ props:[‘detail‘],//detail是子组件上绑定的一个属性,属性值是父组件的数据 template:‘<div>\n‘ + ‘<div>\n‘ + ‘<h1>{{detail.title}}</h1>\n‘ + ‘<div>\n‘ + ‘<span>{{detail.date}}</span>\n‘ + ‘<span v-show="detail.is_original">原创</span>\n‘ + ‘</div>\n‘ + ‘</div>\n‘ + ‘</div>‘ } } });
这样看起来就比较容易理解。