码迷,mamicode.com
首页 > 其他好文 > 详细

vue中组件通信

时间:2018-01-09 16:43:56      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:理解   blog   原创   one   detail   date   通过   demo   original   

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

标签:理解   blog   原创   one   detail   date   通过   demo   original   

原文地址:https://www.cnblogs.com/yaoya/p/8251498.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!