Vuejs第十篇之vuejs父子組件通信
本篇文章是小編結(jié)合官方文檔整理的一套更加細(xì)致,代碼更多更全的教程,非常不錯(cuò),比較適合新手閱讀。
本篇資料來于官方文檔:
http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1
父子組件通信
①訪問子組件、父組件、根組件;
this.$parent 訪問父組件
this.$children 訪問子組件(是一個(gè)數(shù)組)
this.$root 根實(shí)例的后代訪問根實(shí)例
示例代碼:
<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)); //查看當(dāng)前能否在其父組件的子組件中找到索引 console.log(this.$parent === this.$root); //查看父組件和根組件是不是全等的(因?yàn)樗母附M件就是根組件) } } } } }); </script>
當(dāng)在子組件的輸入框按鍵彈起時(shí),顯示內(nèi)容依次為:
父組件、父組件的輸入框的值(默認(rèn)情況是1)、0(表示是父組件的children屬性中的第一個(gè)元素)、true(由于父組件就是根組件,所以是全等的);
通過這樣的方法,可以在組件樹中進(jìn)行互動(dòng)。
②自定義事件:
首先,事件需要放置在events屬性之中,而不是放置在methods屬性中(新手很容易犯的錯(cuò)誤),只能觸發(fā)events屬性中的事件,而methods屬性中的事件是無法觸發(fā)的。
其次,向上派發(fā)和向下廣播有所區(qū)別:向上派發(fā)會(huì)觸發(fā)自身同名事件,而向下廣播不會(huì);
第三,向上派發(fā)和向下廣播默認(rèn)只會(huì)觸發(fā)直系(子或者父,不包括祖先和孫)的事件,除非事件返回值為true,才會(huì)繼續(xù)在這一條線上繼續(xù)。
第四,事件不能顯式的通過 this.事件名 來調(diào)用它。
示例代碼:
<div id="app"> 父組件: <button @click="parentClick">點(diǎn)擊向下傳播broadcast</button> <br/> 子組件1: <children1></children1> <br/> 另一個(gè)子組件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: { //這個(gè)無返回值,不會(huì)繼續(xù)派發(fā) 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: { //這個(gè)是返回值為true,會(huì)繼續(xù)向子組件的子組件派發(fā) props: ['test'], template: "<button>anotherChildren1</button></br>另一個(gè)子組件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】點(diǎn)擊父組件的按鈕,會(huì)向下廣播,然后觸發(fā)子組件1本身,另外一個(gè)子組件1,以及另一個(gè)子組件2;
【2】點(diǎn)擊子組件2的按鈕,會(huì)觸發(fā)子組件2的事件和子組件1的事件,但不會(huì)觸發(fā)父組件的按鈕;
【3】點(diǎn)擊另一個(gè)子組件2的按鈕,會(huì)觸發(fā)另一個(gè)子組件2的事件,另一個(gè)子組件1的事件和父組件的事件(因?yàn)榱硪粋€(gè)子組件1的事件的返回值為true);
③使用v-on綁定自定義事件:
【1】簡(jiǎn)單來說,子組件觸發(fā)某個(gè)事件(events里的方法)時(shí),父組件也會(huì)執(zhí)行某個(gè)方法(父組件methods里的方法)。
【2】觸發(fā)的綁定寫在模板之中(即被替換的那個(gè)template模板中),可以多個(gè)子組件的事件綁定一個(gè)父組件的方法,或者不同子組件的事情綁定不同父組件的方法,但是不能同一個(gè)子組件事件綁定多個(gè)父組件的方法。
【3】子組件派發(fā)消息傳遞的參數(shù),即使子組件的事件沒有參數(shù),也不影響將參數(shù)傳遞給父組件的方法(即父組件的方法可以接受到子組件方法獲取的參數(shù))
如示例:
<div id="app"> 父組件: <button>點(diǎn)擊向下傳播broadcast</button> <br/> 子組件1: <!--綁定寫在這里,可以多個(gè)綁定同一個(gè),或者不同綁定不同的,但不能一個(gè)綁定多個(gè)--> <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: { //這個(gè)無返回值,不會(huì)繼續(xù)派發(fā) 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>
④子組件索引
簡(jiǎn)單來說:就是可以直接從索引獲取到子組件,然后就可以調(diào)用各個(gè)子組件的方法了。
添加索引方法是:在標(biāo)簽里添加v-ref:索引名
調(diào)用組件方法是:vm.$ref.索引名
也可以直接在父組件中使用this.$ref.索引名
這個(gè)時(shí)候,就可以獲得組件了,然后通過組件可以調(diào)用他的方法,或者是使用其數(shù)據(jù)。
示例代碼:
<div id="app"> 父組件: <button @click="todo">觸發(fā)子組件的事件</button> <br/> 子組件1: <!--綁定寫在這里,可以多個(gè)綁定同一個(gè),或者不同綁定不同的,但不能一個(gè)綁定多個(gè)--> <children v-ref:child></children> </div> <script> var vm = new Vue({ el: '#app', methods: { todo: function () { this.$refs.child.fromParent(); //通過索引調(diào)用子組件的fromParent方法 } }, components: { children: { //這個(gè)無返回值,不會(huì)繼續(xù)派發(fā) props: ['test'], template: "<button>children1</button>", methods: { fromParent: function () { console.log("happened fromParent by ref"); } } } } }); </script>
以上所述是小編給大家介紹的Vuejs第十篇之vuejs父子組件通信,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue2.0與vue3.0及vue與react的區(qū)別及說明
這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能
要實(shí)現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫實(shí)現(xiàn)一個(gè)完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下2023-10-10vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication
這篇文章主要介紹了vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10