前面看官方文檔一直不能理解在子組件模板中引用父組件的數據，看了很多遍也是模糊，今天無意中看到一個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中組件通信