vue中组件通信

Posted 2020-10-20 yaoya

　　前面看官方文档一直不能理解在子组件模板中引用父组件的数据，看了很多遍也是模糊，今天无意中看到一个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>‘
        }
    }
});

　　这样看起来就比较容易理解。