Vue組件間通訊有哪些方式

方式：1、透過共同祖輩「$parent」或「$root」進行通訊；2、父元件透過設定子元件ref來進行通訊；3、兄弟元件透過「$emit」觸發自訂事件，「$emit」第二個參數為傳遞的數值，另一個兄弟元件透過「$on」監聽自訂事件。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

Vue元件間通訊有哪些方式

一、元件間通訊的概念

開始之前，我們先把元件間通信這個詞進行拆分

組件

通信

都知道組件是vue最強大的功能之一，vue中每一個.vue我們都可以視之為一個元件

通訊指的是發送者透過某種媒體以某種格式來傳遞訊息到收信者以達到某個目的。廣義上，任何資訊的交通都是通訊

元件間通訊即指元件(.vue)透過某種方式來傳遞訊息以達到某個目的

舉個栗子

我們在使用UI框架中的table元件，可能會往table元件中傳入某些數據，這個本質就形成了元件之間的通訊

二、元件間通信解決了什麼

在古代，人們透過驛站、飛鴿傳書、烽火警報、符號、語言、眼神、觸碰等方式進行訊息傳遞，到了今天，隨著科技水準的快速發展，通訊基本上完全利用有線或無線電完成，相繼出現了有線電話、固定電話、無線電話、手機、網路甚至視訊電話等各種通訊方式

從上面這段話，我們可以看到通訊的本質是資訊同步，共享

回到vue中，每個元件之間的都有獨自的作用域，元件間的資料是無法共享的

但實際開發工作中我們常常需要讓元件之間共享數據，這也是元件通訊的目的

要讓它們互相之間能進行通訊，這樣才能構成一個有機的完整系統

二、元件間通訊的分類

元件間通訊的分類可以分成以下

• 父子元件之間的通訊

• 兄弟元件之間的通訊

• #祖孫與後代元件之間的通訊

• 非關聯元件間之間的通訊
• 三、元件間通訊的方案

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

• 透過 props 傳遞

• #透過 $emit 觸發自訂事件

#使用 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属性必须传递
    }
}

Father.vue元件

#$emit 觸發自訂事件

適用場景：子元件傳遞資料給父元件

子元件透過$emit觸發自訂事件，$emit第二個參數為傳遞的數值

父元件綁定監聽器取得到子元件傳遞過來的參數

#Chilfen.vue

this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />

ref

#父元件在使用子元件的時候設定ref

父元件透過設定子元件ref來取得資料

父元件

<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')

######attrs與 listeners######## ##適用場景：祖先傳遞資料給子孫######設定批次向下傳屬性$attrs和 $listeners######包含了父級作用域中不作為 prop 被辨識 (且取得) 的特性綁定 ( class 和 style 除外)。 ######可以透過 v-bind="$attrs" 傳⼊內部元件###

// 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(&#39;some-event&#39;, &#39;msg from grandson&#39;)">
{{msg}}
</div>

######provide 與 inject##########在祖先元件定義provide屬性，傳回傳遞的值######在後代元件經由inject接收元件傳遞過來的值######祖先元件###

provide(){
    return {
        foo:'foo'
    }
}

###後位元件######inject:['foo'] // 取得到祖先元件傳遞過來的值#########vuex##########適用場景: 複雜關係的元件資料傳遞###

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中文網其他相關文章！