首页 > 其他 > 详细

vue中组件通信

时间:2018-01-09 16:03:20      阅读:208      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!