整理vue中8種常規(guī)的通信方案

1、通過 props 傳遞 2、通過 $emit 觸發(fā)自定義事件 3、使用 ref 4、EventBus 5、$parent 或$root 6、attrs 與 listeners 7、Provide 與 Inject 8、Vuex

1、通過 props 傳遞

/*適用場景：父組件傳遞數(shù)據(jù)給子組件 子組件設(shè)置props屬性，定義接收父組件傳遞過來的參數(shù) 父組件在使用子組件標(biāo)簽中通過字面量來傳遞值*///子組件 props:{ // 字符串形式 name:String // 接收的類型參數(shù) // 對象形式 age:{ type:Number, // 接收的類型為數(shù)值 defaule:18, // 默認(rèn)值為18 require:true // age屬性必須傳遞 } }//父組件 <Children name="Tom" age=18 /

2、$emit 觸發(fā)自定義事件

/*適用場景：子組件傳遞數(shù)據(jù)給父組件 子組件通過$emit觸發(fā)自定義事件，$emit第二個參數(shù)為傳遞的數(shù)值 父組件綁定監(jiān)聽器獲取到子組件傳遞過來的參數(shù)*///子組件 this.$emit('add', this.msg) //父組件 <Children @add="getMsg($event)" />

3、使用ref

/*適用場景：父組件獲取子組件信息 父組件在使用子組件的時候設(shè)置ref 父組件通過設(shè)置子組件ref來獲取數(shù)據(jù)*///父組件 <Children ref="foo" /> this.$refs.foo // 獲取子組件實例，通過子組件實例我們就能拿到對應(yīng)的數(shù)據(jù)，可以調(diào)用子組件的變量和方法

4、EventBus實現(xiàn)兄弟組件間的通信

/*使用場景：兄弟組件傳值 創(chuàng)建一個中央事件總線EventBus 兄弟組件通過$emit觸發(fā)自定義事件，$emit第二個參數(shù)為傳遞的數(shù)值 另一個兄弟組件通過$on監(jiān)聽自定義事件*/// 創(chuàng)建一個中央時間總線類 class Bus { constructor() { this.callbacks = {}; // 存放事件的名字 } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } } } // main.js Vue.prototype.$bus = new Bus() // 將$bus掛載到vue實例的原型上 // 另一種方式 Vue.prototype.$bus = new Vue() // Vue已經(jīng)實現(xiàn)了Bus的功能//組件A this.$bus.$emit('foo') //組件B this.$bus.$on('foo', this.handle)

5、通過$ parent 或 $ root通信

//在一個父組件中我們希望兩個子組件通信時候可以通過共同祖輩$parent或者$root搭建通信橋連//組件A this.$parent.on('add',this.add) //組件B this.$parent.emit('add')

6、$ attrs 與$ listeners

$ attrs

/*適用場景：祖先傳遞數(shù)據(jù)給子孫 設(shè)置批量向下傳屬性$attrs和 $listeners 包含了父級作用域中不作為 prop 被識別 (且獲取) 的特性綁定 ( class 和 style 除外)。 可以通過 v-bind="$attrs" 傳?內(nèi)部組件*///$attrs能夠接收除了props聲明外的所有綁定屬性，但是一旦屬性在props中被聲明了，那么就不能通過$attrs獲取//父組件 <template><child :name="張三" age="18" ></child> </template>//子組件 <template><p>{{name}}</p><grandson:name="張三" age="18" v-bind="$attrs"></grandson> </template>props:['age'] created(){console.log($attrs)//{ name: "張三" } }//孫子組件 <template><p>{{name}}</p> </template>created(){console.log($attrs)//{ name: "張三" } } /*可以看出，我們聲明了兩個屬性，但是age在props中聲明了，所以打印$attrs時候只有name屬性 而在子組件上面綁定v-bind="$attrs"則可以將父組件的屬性向下傳遞到孫子組件，這就是$attrs 的妙用，我可以在子組件上綁定多個屬性，子組件需要的在props聲明，孫子組件用到的則用$attrs 傳遞下去，這樣能夠清晰明了，也方便維護(hù)*/

$ listeners
跟$ attrs不一樣，$ listeners是可以讓孫子和兒子組件訪問到父組件的屬性和方法

//$ listeners：接收除了帶有.native事件修飾符的所有事件監(jiān)聽器 <template><child @click.native="clickChild" @customEvent="childEvent" ></child> </template>//子組件 <template><grandson:name="張三" age="18" v-bind="$listeners"></grandson> </template>created(){console.log($listeners)//{ customEvent: fn } }//孫子組件 created(){this.$emit('customEvent') }

總的來說，$ attrs 與$ listeners的使用場景：
1、組件傳值時使用： 爺爺在父親組件傳遞值，父親組件會通過$ attrs獲取到不在父親props里面的所有屬性，父親組件通過在孫子組件上綁定$ attrs 和 $ listeners 使孫組件獲取爺爺傳遞的值并且可以調(diào)用在爺爺那里定義的方法；
2、對一些UI庫進(jìn)行二次封裝時使用：比如element-ui，里面的組件不能滿足自己的使用場景的時候，會二次封裝，但是又想保留他自己的屬性和方法，那么這個時候時候$attrs和$listners是個完美的解決方案。

在學(xué)習(xí)這塊的時候看到一篇圖文并茂的文章，推薦給大家參考：【Vue】 組件通信之$ attrs、$ listeners

7、provide 與 inject

provide 與 inject對于我理解來說像是$ attrs 與$ listeners簡單的升級版

//應(yīng)用場景：適合多層級適合向后代組件傳值//祖先組件 provide(){ return { msg:'hello world' } }//后代組件 inject:['msg'] // 獲取到祖先組件傳遞過來的值

8、vuex

這個大魔王想必就不用過多贅述了，能夠優(yōu)雅的使用vuex來管理項目的都是大手子，這里只做簡單的介紹，想了解詳細(xì)請移步我另一篇文章vue面試題集

state：用來存放共享變量的地方getter：可以增加一個getter派生狀態(tài)，(相當(dāng)于store中的計算屬性），用來獲得共享變量的值mutations：用來存放修改state的方法。actions：也是用來存放修改state的方法，不過action是在mutations的基礎(chǔ)上進(jìn)行。常用來做一些異步操作

總結(jié)

每個方法都有其適用的場景和優(yōu)勢，學(xué)會組合使用才是我們需要掌握的藝術(shù)：

• 父子關(guān)系的組件數(shù)據(jù)傳遞選擇 props 與 $ emit進(jìn)行傳遞，也可選擇ref
• 兄弟關(guān)系的組件數(shù)據(jù)傳遞可選擇$ bus，其次可以選擇$ parent進(jìn)行傳遞
• 祖先與后代組件數(shù)據(jù)傳遞可選擇attrs與listeners或者 Provide與 Inject
• 復(fù)雜關(guān)系的組件數(shù)據(jù)傳遞可以通過vuex存放共享的變量

總結(jié)

以上是生活随笔為你收集整理的vue组件间通信方法集的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。