方式：1、透過共同祖輩「$parent」或「$root」進行通訊；2、父元件透過設定子元件ref來進行通訊；3、兄弟元件透過「$emit」觸發自訂事件，「$emit」第二個參數為傳遞的數值，另一個兄弟元件透過「$on」監聽自訂事件。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
一、元件間通訊的概念
開始之前，我們先把元件間通信這個詞進行拆分
組件
通信
都知道組件是vue最強大的功能之一，vue中每一個.vue我們都可以視之為一個元件
通訊指的是發送者透過某種媒體以某種格式來傳遞訊息到收信者以達到某個目的。廣義上，任何資訊的交通都是通訊
元件間通訊即指元件(.vue)透過某種方式來傳遞訊息以達到某個目的
舉個栗子
我們在使用UI框架中的table元件，可能會往table元件中傳入某些數據，這個本質就形成了元件之間的通訊
二、元件間通信解決了什麼
在古代，人們透過驛站、飛鴿傳書、烽火警報、符號、語言、眼神、觸碰等方式進行訊息傳遞，到了今天，隨著科技水準的快速發展，通訊基本上完全利用有線或無線電完成，相繼出現了有線電話、固定電話、無線電話、手機、網路甚至視訊電話等各種通訊方式
從上面這段話，我們可以看到通訊的本質是資訊同步，共享
回到vue中，每個元件之間的都有獨自的作用域，元件間的資料是無法共享的
但實際開發工作中我們常常需要讓元件之間共享數據，這也是元件通訊的目的
要讓它們互相之間能進行通訊，這樣才能構成一個有機的完整系統
二、元件間通訊的分類
元件間通訊的分類可以分成以下
父子元件之間的通訊
兄弟元件之間的通訊
#祖孫與後代元件之間的通訊
#使用 ref
EventBus
#parent或root
##attrs 與 listeners Provide 與 Inject#Vuex
props傳遞資料
適用場景：父元件傳遞資料給子元件
子元件設定props屬性，定義接收父元件傳遞過來的參數父元件在使用子元件標籤中透過字面量傳遞值Children.vue
props:{
// 字符串形式
name:String // 接收的类型参数
// 对象形式
age:{
type:Number, // 接收的类型为数值
defaule:18, // 默认值为18
require:true // age属性必须传递
}
}#$emit 觸發自訂事件
適用場景：子元件傳遞資料給父元件子元件透過$emit觸發自訂事件，$emit第二個參數為傳遞的數值父元件綁定監聽器取得到子元件傳遞過來的參數#Chilfen.vuethis.$emit('add', good) Father.vue <Children @add="cartAdd($event)" />
<Children ref="foo" /> this.$refs.foo // 获取子组件实例，通过子组件实例我们就能拿到对应的数据
EventBus
使用場景：兄弟元件傳值建立一個中央時間匯流排EventBus兄弟元件透過$emit觸發自訂事件，$emit第二個參數為傳遞的數值另一個兄弟元件透過$on監聽自訂事件Bus.js// 创建一个中央时间总线类
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的功能
Children1.vue this.$bus.$emit('foo') Children2.vue this.$bus.$on('foo', this.handle)
Parent或 root
#透過共同祖輩$parent或$root搭建通訊僑聯兄弟元件###this.$parent.on('add',this.add)
this.$parent.emit('add')
// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// Grandson使⽤
<div @click="$emit('some-event', 'msg from grandson')">
{{msg}}
</div>provide(){
return {
foo:'foo'
}
}Vuex作用相當於一個用來儲存共享變數的容器
state用來存放共享變數的地方
getter，可以增加一個getter派生狀態，(相當於store中的計算屬性），用來取得共享變數的值
mutations用來存放修改state的方法。
actions也是用來存放修改state的方法，不過action是在mutations的基礎上進行。常用來做一些非同步操作
小結
父子關係的元件資料傳遞選擇 props 與 $emit傳遞，也可選擇ref
兄弟關係的元件資料傳遞可選擇$bus，其次可以選擇$parent進行傳遞
祖先與後代組件資料傳遞可選擇attrs與listeners或 Provide與 Inject
複雜關係的元件資料傳遞可以透過vuex存放共享的變數
【相關推薦：《vue.js教學》】
以上是Vue組件間通訊有哪些方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
