本篇文章是小編結合官方文檔整理的一套更加細致，代碼更多更全的教程，非常不錯，比較適合新手閱讀。
本篇資料來于官方文檔：
http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1
父子組件通信
①訪問子組件、父組件、根組件；
this.$parent 訪問父組件
this.$children 訪問子組件（是一個數組）
this.$root 根實例的后代訪問根實例
示例代碼：
<div id="app"> 父組件： <input v-model="val"><br/> 子組件： <test :test="val"></test> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components: { test: { props: ['test'], template: "<input @keyup='findParent' v-model='test'/>", methods: { findParent: function () { console.log(this.$parent); //訪問根組件 console.log(this.$parent.val); //訪問根組件的val屬性 console.log(this.$parent.$children.indexOf(this)); //查看當前能否在其父組件的子組件中找到索引 console.log(this.$parent === this.$root); //查看父組件和根組件是不是全等的（因為他的父組件就是根組件） } } } } }); </script>當在子組件的輸入框按鍵彈起時，顯示內容依次為：
父組件、父組件的輸入框的值（默認情況是1）、0（表示是父組件的children屬性中的第一個元素）、true（由于父組件就是根組件，所以是全等的）；
通過這樣的方法，可以在組件樹中進行互動。
②自定義事件：
首先，事件需要放置在events屬性之中，而不是放置在methods屬性中（新手很容易犯的錯誤），只能觸發events屬性中的事件，而methods屬性中的事件是無法觸發的。
其次，向上派發和向下廣播有所區別：向上派發會觸發自身同名事件，而向下廣播不會；
第三，向上派發和向下廣播默認只會觸發直系（子或者父，不包括祖先和孫）的事件，除非事件返回值為true，才會繼續在這一條線上繼續。
第四，事件不能顯式的通過 this.事件名 來調用它。
示例代碼：
<div id="app"> 父組件： <button @click="parentClick">點擊向下傳播broadcast</button> <br/> 子組件1： <children1></children1> <br/> 另一個子組件1： <another-children1></another-children1> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, methods: { parentClick: function () { this.$broadcast("parentClick", "abc"); } }, events: { childrenClick: function () { console.log("childrenClick-Parent"); }, parentClick: function () { console.log("parentClick-Parent"); return true; } }, components: { children1: { //這個無返回值，不會繼續派發 props: ['test'], template: "<button>children1</button></br>子組件2：<children2></children2>", events: { childrenClick: function () { console.log("childrenClick-children1"); }, parentClick: function (msg) { console.log("parentClick-Children1"); console.log("message:" + msg); } }, components: { children2: { props: ['test'], template: "<button @click='findParent'>children-Click</button>", methods: { findParent: function () { this.$dispatch('childrenClick'); } }, events: { childrenClick: function () { console.log("childrenClick-children2"); }, parentClick: function (msg) { console.log("parentClick-Children2"); console.log("message:" + msg); } } } } }, anotherChildren1: { //這個是返回值為true，會繼續向子組件的子組件派發 props: ['test'], template: "<button>anotherChildren1</button></br>另一個子組件2：<another-children2></another-children2>", events: { childrenClick: function () { console.log("childrenClick-anotherChildren1"); return true; }, parentClick: function (msg) { console.log("parentClick-anotherChildren1"); console.log("message:" + msg); return true; } }, components: { anotherChildren2: { props: ['test'], template: "<button @click='findParent'>anotherChildren2-Click</button>", methods: { findParent: function () { this.$dispatch('childrenClick'); } }, events: { childrenClick: function () { console.log("childrenClick-anotherChildren2"); }, parentClick: function (msg) { console.log("parentClick-anotherChildren2"); console.log("message:" + msg); } } } } } } }); </script> }, parentClick: function () { console.log("parentClick-anotherChildren2"); } } } } } } }); </script> 說明：
【1】點擊父組件的按鈕，會向下廣播，然后觸發子組件1本身，另外一個子組件1，以及另一個子組件2；
【2】點擊子組件2的按鈕，會觸發子組件2的事件和子組件1的事件，但不會觸發父組件的按鈕；
【3】點擊另一個子組件2的按鈕，會觸發另一個子組件2的事件，另一個子組件1的事件和父組件的事件（因為另一個子組件1的事件的返回值為true）；
③使用v-on綁定自定義事件：
【1】簡單來說，子組件觸發某個事件（events里的方法）時，父組件也會執行某個方法（父組件methods里的方法）。
【2】觸發的綁定寫在模板之中（即被替換的那個template模板中），可以多個子組件的事件綁定一個父組件的方法，或者不同子組件的事情綁定不同父組件的方法，但是不能同一個子組件事件綁定多個父組件的方法。
【3】子組件派發消息傳遞的參數，即使子組件的事件沒有參數，也不影響將參數傳遞給父組件的方法（即父組件的方法可以接受到子組件方法獲取的參數）
如示例：
<div id="app"> 父組件： <button>點擊向下傳播broadcast</button> <br/> 子組件1： <!--綁定寫在這里，可以多個綁定同一個，或者不同綁定不同的，但不能一個綁定多個--> <children v-on:test="parent" @test2="another"></children> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, methods: { parent: function (arg) { console.log(arg); console.log("the first method with test event"); }, another: function () { console.log("another method"); } }, components: { children: { //這個無返回值，不會繼續派發 props: ['test'], template: "<button @click='childClick'>children1</button></br><button @click='childClick2'>children1</button>", methods: { childClick: function () { this.$emit("test", 'the argument for dispatch'); }, childClick2: function () { this.$emit("test2"); } }, events: { test: function () { console.log("test"); }, test2: function () { console.log("test2"); } } } } }); </script>④子組件索引
簡單來說：就是可以直接從索引獲取到子組件，然后就可以調用各個子組件的方法了。
添加索引方法是：在標簽里添加v-ref:索引名
調用組件方法是：vm.$ref.索引名
也可以直接在父組件中使用this.$ref.索引名
這個時候，就可以獲得組件了，然后通過組件可以調用他的方法，或者是使用其數據。
示例代碼：
<div id="app"> 父組件： <button @click="todo">觸發子組件的事件</button> <br/> 子組件1： <!--綁定寫在這里，可以多個綁定同一個，或者不同綁定不同的，但不能一個綁定多個--> <children v-ref:child></children> </div> <script> var vm = new Vue({ el: '#app', methods: { todo: function () { this.$refs.child.fromParent(); //通過索引調用子組件的fromParent方法 } }, components: { children: { //這個無返回值，不會繼續派發 props: ['test'], template: "<button>children1</button>", methods: { fromParent: function () { console.log("happened fromParent by ref"); } } } } }); </script>以上所述是小編給大家介紹的Vuejs第十篇之vuejs父子組件通信，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
