整理vue中8種常規的通信方案

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

1、通過 props 傳遞

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

2、$emit 觸發自定義事件

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

3、使用ref

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

4、EventBus實現兄弟組件間的通信

/*使用場景：兄弟組件傳值 創建一個中央事件總線EventBus 兄弟組件通過$emit觸發自定義事件，$emit第二個參數為傳遞的數值 另一個兄弟組件通過$on監聽自定義事件*/// 創建一個中央時間總線類 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已經實現了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

/*適用場景：祖先傳遞數據給子孫 設置批量向下傳屬性$attrs和 $listeners 包含了父級作用域中不作為 prop 被識別 (且獲取) 的特性綁定 ( class 和 style 除外)。 可以通過 v-bind="$attrs" 傳?內部組件*///$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 傳遞下去，這樣能夠清晰明了，也方便維護*/

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

//$ listeners：接收除了帶有.native事件修飾符的所有事件監聽器 <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 使孫組件獲取爺爺傳遞的值并且可以調用在爺爺那里定義的方法；
2、對一些UI庫進行二次封裝時使用：比如element-ui，里面的組件不能滿足自己的使用場景的時候，會二次封裝，但是又想保留他自己的屬性和方法，那么這個時候時候$attrs和$listners是個完美的解決方案。

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

7、provide 與 inject

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

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

8、vuex

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

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

總結

每個方法都有其適用的場景和優勢，學會組合使用才是我們需要掌握的藝術：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。