您好,登錄后才能下訂單哦!
使用Vue也有很長(zhǎng)一段時(shí)間,但是一直以來(lái)都沒(méi)對(duì)其組件之間的通信做一個(gè)總結(jié),這次就借此總結(jié)一下。
父子組件之間的通信
1)props和$emit
父組件通過(guò)props將數(shù)據(jù)下發(fā)給props,子組件通過(guò)$emit來(lái)觸發(fā)自定義事件來(lái)通知父組件進(jìn)行相應(yīng)的操作
具體代碼如下:
``` // 父組件 <template> <div> <h4>props和$emit</h4> <Children v-on:changeMsg="changeMsg" :msg="msg"/> </div> </template> <script> import Children from './children'; export default { data() { return { msg: '傳遞的值' } }, components: { Children }, methods: { changeMsg(val) { this.msg = val; } } } </script> // 子組件 <template> <div> <h4 @click="notify">{{msg}}</h4> </div> </template> <script> export default { data(){ return { } }, props: ['msg'], methods: { notify() { this.$emit('changeMsg', '修改后的'); } } } </script> ```
2)vm.$parent和vm.$children
vm.$parent: 父實(shí)例,如果當(dāng)前實(shí)例有的話
vm.$children: 獲取當(dāng)前實(shí)例的直接直接子組件,需要注意的是$children并不保證順序,也不是響應(yīng)式的
具體代碼如下:
``` // 父組件的代碼 <template> <div> <h4>{{title}}</h4> <button @click="amend">在父組件中修改子組件的標(biāo)題</button> <Children /> </div> </template> <script> import Children from './children.vue'; export default { data() { return { title: '父組件' } }, components: { Children }, methods: { amend() { this.$children[0].title = '修改后的子組件標(biāo)題'; } } } </script> // 子組件的代碼 <template> <div> <h4>{{title}}</h4> <button @click="amend">在子組件中修改父組件的標(biāo)題</button> </div> </template> <script> export default { data() { return { title: '子組件' } }, methods: { amend() { this.$parent.title = '修改后的父組件標(biāo)題'; } } } </script> ```
3)自定義事件的v-model
https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
具體代碼如下:
``` // 父組件 <template> <div> 標(biāo)題:<input type="text" v-model="mymessage"><br /> <Children v-model="mymessage" /> </div> </template> <script> import Children from './children.vue'; export default { data() { return { mymessage: '名字', } }, components: { Children } } </script> // 子組件 <template> <div> <input type="text" :value="mymessage" @input="changeValue"> </div> </template> <script> export default { model: { prop: 'mymessage', event: 'input' }, props: ['mymessage'], methods: { changeValue(event){ this.$emit('input', event.target.value); } } } </script> ```
祖先組件和其子孫組件通信
1)provide/inject
provide/inject,允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴,不論組件層次有多深,并在起上下文關(guān)系成立的時(shí)間里始終生效
https://cn.vuejs.org/v2/api/#provide-inject
具體代碼如下:
``` // 父組件 <template> <div> <h4>{{title}}</h4> <Children /> </div> </template> <script> import Children from './children.vue'; export default { data() { return { title: '父組件的標(biāo)題' } }, provide() { return { updateTitle: this.updateTitle } }, methods: { updateTitle(title) { this.title = title; } }, components: { Children } } </script> // 子組件 <template> <div> <button @click="changeAttr">修改父組件的屬性</button> <Grandson /> </div> </template> <script> import Grandson from './grandson.vue'; export default { data() { return { } }, inject: ['updateTitle'], methods: { changeAttr() { this.updateTitle('子組件修改標(biāo)題'); } }, components: { Grandson } } </script> // 孫組件 <template> <div> <button @click="changeAttr">修改祖先組件的屬性</button> </div> </template> <script> export default { inject: ['updateTitle'], methods: { changeAttr() { this.updateTitle('孫組件修改標(biāo)題'); } } } </script> ```
2)$attrs和$listeners
組件A下面有一個(gè)組件B,組件B下面有一個(gè)組件C,如果想將組件A的數(shù)據(jù)和自定義事件傳遞給組件C,就可以使用$attrs和$listeners。
vm.$attrs: 當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)(沒(méi)有在props聲明屬性),這里會(huì)包含所有父作用域的綁定 ,并且可以通過(guò) v-bind="$attrs
" 傳入內(nèi)部組件
vm.$listeners: 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件。
https://cn.vuejs.org/v2/api/#vm-attrs
具體代碼如下:
``` // 父組件 <template> <div> <Children :msg="msg" v-on:changeMsg="changeMsg"/> </div> </template> <script> import Children from './children'; export default { data() { return { msg: '下發(fā)數(shù)據(jù)', test: '123' } }, components: { Children }, methods: { changeMsg() { this.msg = '修改后的數(shù)據(jù)'; } } } </script> // 子組件 <template> <div> <Grandson v-bind="$attrs" v-on="$listeners"/> </div> </template> <script> import Grandson from './grandson'; export default { components: { Grandson } } </script> // 孫組件 ``` <template> <div> <h4>{{$attrs.msg}}</h4> <button @click="change">修改數(shù)據(jù)</button> </div> </template> <script> export default { data() { return { } }, methods: { change() { this.$emit('changeMsg') } } } </script> ``` ```
非父子組件之間的通信
通過(guò)中央事件總線來(lái)進(jìn)行通信
通過(guò)新建一個(gè)Vue事件的bus對(duì)象,然后通過(guò)bus.$emit來(lái)觸發(fā)事件,bus.$on監(jiān)聽(tīng)觸發(fā)的事件。使用中央事件總線時(shí),需要在手動(dòng)清除它,不然它會(huì)一直存在,原本只執(zhí)行一次的操作,將會(huì)執(zhí)行多次。
具體代碼如下:
``` // 父組件 <template> <div> <One /> <Two /> </div> </template> <script> import One from './one.vue'; import Two from './two.vue'; export default { data() { return { } }, components: { One, Two } } </script> // one組件 <template> <div> <h4>第一個(gè)組件</h4> <button @click="add">增加數(shù)量</button> </div> </template> <script> import {BUS} from './index.js'; export default { data() { return { } }, methods: { add() { BUS.$emit('add'); } }, beforeDestory() { BUS.$off('add'); } } </script> // two組件 <template> <div> <h4>第二個(gè)組件</h4> <h4>數(shù)量: {{num}}</h4> </div> </template> <script> import {BUS} from './index.js'; export default { data() { return { num: 1 } }, mounted() { BUS.$on('add', () => { this.num += 1; }) }, beforeDestroy() { BUS.$off('add'); } } </script> // index.js 創(chuàng)建的bus import Vue from 'vue'; export const BUS = new Vue({ }) ```
通過(guò)vuex來(lái)進(jìn)行數(shù)據(jù)管理,具體內(nèi)容見(jiàn)vuex官網(wǎng)
如果有什么不對(duì)的地方,或者還有什么方法我沒(méi)有寫到,希望大家可以提出來(lái),謝謝。
總結(jié)
以上所述是小編給大家介紹的Vue組件之間通信的七種方式,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。