通信 容易 post body blog 属性 var 模板 ops
前面看官方文档一直不能理解在子组件模板中引用父组件的数据,看了很多遍也是模糊,今天无意中看到一个 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 > '
}
}
});
vue 中组件通信
来源: http://www.bubuko.com/infodetail-2455079.html