// 注冊一個子組件Vue.component('child', {
    data: function(){
        text: '我是father的子組件！'
    }
    template: '{{ text }}'})// 注冊一個父組件Vue.component('father', {
    template: '
'  // 在模板中使用了child組件})

Vue.component('brother1', {
    template: '
我是大哥
'})Vue.component('brother2', {
    template: '
我是小弟
'})

頁面中就會渲染出 ：

我是大哥

我是小弟

Prop

子組件想要使用父組件的數(shù)據(jù)，我們需要通過子組件的 props 選項來獲得父組件傳過來的數(shù)據(jù)。以下我使用在 .vue 文件中的格式來寫例子。

如何傳遞數(shù)據(jù)

在父組件 father.vue 中引用子組件 child.vue，把 name 的值傳給 child 組件。

在子組件 child.vue 中的 props 選項中聲明它期待獲得的數(shù)據(jù)

那么頁面中就會渲染出：Hello linxin

單向數(shù)據(jù)流

當(dāng)父組件的 name 發(fā)生改變，子組件也會自動地更新視圖。但是在子組件中，我們不要去修改 prop。如果你必須要修改到這些數(shù)據(jù)，你可以使用以下方法：

方法一：把 prop 賦值給一個局部變量，然后需要修改的話就修改這個局部變量，而不影響 prop

export default {
    data(){
        newMessage: null  
    },
    props: ['message'],
    created(){
        this.newMessage = this.message;
    }}

方法二：在計算屬性中對 prop 進行處理

export default {
    props: ['message'],
    computed{
        newMessage(){
            return this.newMessage + ' 哈哈哈';
        }
    }}

自定義事件

prop 是單向綁定的：當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件，但是不會反過來。修改子組件的 prop 值，是不會傳回給父組件去更新視圖的。那么子組件要如何去與父組件通訊呢？

那就是自定義事件。通過在父組件 $on(eventName) 監(jiān)聽自定義事件，當(dāng)子組件里 $emit(eventName) 觸發(fā)該自定義事件的時候，父組件執(zhí)行相應(yīng)的操作。

比如在父組件中控制一個彈框子組件的顯示，在子組件中按下關(guān)閉之后，告訴父組件去隱藏它，然后父組件就執(zhí)行操作隱藏彈框。

在子組件 dialog.vue 中：

這樣就實現(xiàn)了父子組件之間的相互通訊。

Vuex

上面的例子都是建立在父子關(guān)系的組件上，但是對于其他層級的關(guān)系，實現(xiàn)起來就比較繁瑣了。那么這時候 Vuex 就能更好的幫你在各個組件間實時通訊了。