快捷導(dǎo)航

Vue非父子組件之間的通信方式詳解

更新時(shí)間：2022年07月28日 15:36:32 作者：林有酒

在實(shí)際業(yè)務(wù)中,除了父子組件通信外,還有很多非父子組件通信的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue非父子組件之間的通信方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

非父子組件的通信

此篇講解的是, 在學(xué)習(xí)狀態(tài)管理之前, 非父子間通信的方案

在開(kāi)發(fā)中，我們構(gòu)建了組件樹(shù)之后，除了父子組件之間的通信之外，還會(huì)有非父子組件之間的通信。

這里我們主要講兩種方式：

Provide/Inject；
全局事件總線；

1.Provide和Inject

1.1基本使用

Provide/Inject用于非父子組件之間共享數(shù)據(jù)：

比如有一些深度嵌套的組件，子組件想要獲取父組件的部分內(nèi)容；
在這種情況下，如果我們?nèi)匀粚rops沿著組件鏈逐級(jí)傳遞下去，就會(huì)非常的麻煩；

對(duì)于這種情況下，我們可以使用 Provide 和 Inject ：

無(wú)論層級(jí)結(jié)構(gòu)有多深，父組件都可以作為其所有子組件的依賴提供者；
父組件有一個(gè) provide 選項(xiàng)來(lái)提供數(shù)據(jù)；
子組件有一個(gè) inject 選項(xiàng)來(lái)開(kāi)始使用這些數(shù)據(jù)；

實(shí)際上，你可以將依賴注入看作是“long range props”，除了：

父組件不需要知道哪些子組件使用它 provide 的 property
子組件不需要知道 inject 的 property 來(lái)自哪里

我們開(kāi)發(fā)一個(gè)下面這樣的結(jié)構(gòu): 讓App.vue提供一些數(shù)據(jù)給HomeContent.vue使用[外鏈圖片轉(zhuǎn)存失敗,

在祖先組件中通過(guò)provide將數(shù)據(jù)傳出, provide對(duì)應(yīng)的是一個(gè)對(duì)象

export default {
  components: {
    Home
  },
  // 通過(guò)provide將數(shù)據(jù)傳出
	provide() {
		return {
			name: this.name,
			age: this.age,
			height: this.height
		}
	}
}

在后代元素中, 通過(guò)inject接收祖先傳遞的數(shù)據(jù), inject對(duì)應(yīng)的是一個(gè)數(shù)組

export default {
  inject: ["name", "age", "height"]
}

1.2處理響應(yīng)式數(shù)據(jù)(了解)

我們先來(lái)驗(yàn)證一個(gè)結(jié)果：如果我們修改了this.names的內(nèi)容，那么使用length的子組件會(huì)不會(huì)是響應(yīng)式的？

<template>
  <div class="app">
    <home />
    <h2>{{ name }}</h2>
    <button @click="btnClick">按鈕</button>
  </div>
</template>

<script>
  import Home from './Home.vue'

  export default {
    components: {
      Home
    },
    data() {
      return {
        name: "chenyq",
        age: 18,
        height: 1.88,
      }
    },
    // 通過(guò)provide將數(shù)據(jù)傳出
    provide() {
      return {
        name: this.name,
        age: this.age,
        height: this.height
      }
    },
    methods: {
      btnClick() {
        this.name = "kaisa"
      }
    },
  }
</script>

我們會(huì)發(fā)現(xiàn)對(duì)應(yīng)的子組件中是沒(méi)有反應(yīng)的：

這是因?yàn)楫?dāng)我們修改了names之后，之前在provide中引入的 this.name 本身并不是響應(yīng)式的；

那么怎么樣可以讓我們的數(shù)據(jù)變成響應(yīng)式的呢？

非常的簡(jiǎn)單，我們可以使用響應(yīng)式的一些API來(lái)完成這些功能，比如說(shuō)computed函數(shù)；
當(dāng)然，這個(gè)computed是vue3的新特性，在后面我會(huì)專門講解，這里大家可以先直接使用一下；

import { computed } from 'vue'

export default {
  components: {
    Home
  },
  data() {
    return {
      name: "chenyq",
      age: 18,
      height: 1.88,
    }
  },
  // 通過(guò)provide將數(shù)據(jù)傳出
  provide() {
    return {
      name: computed(() => this.name),
      age: this.age,
      height: this.name
    }
  },
  methods: {
    btnClick() {
      this.name = "kaisa"
    }
  },
}

注意：我們?cè)谑褂胣ame的時(shí)候需要獲取其中的value

這是因?yàn)閏omputed返回的是一個(gè)ref對(duì)象，需要取出其中的value來(lái)使用；

<template>
  <div class="home-content">
    <h2>名字: {{ name.value }}, 年齡: {{ age}}, 身高: {{ height}}</h2>
  </div>
</template>

2.全局事件總線

Vue3從實(shí)例中移除了 o n 、 on、 on、off 和 $once 方法，所以我們?nèi)绻Ｍ^續(xù)使用全局事件總線，要通過(guò)第三方的庫(kù)：

Vue3官方有推薦一些庫(kù)，例如 mitt 或 tiny-emitter, 這兩個(gè)庫(kù)雖然不再維護(hù), 但還是可以使用的；
這里我們主要講解一下 hy-event-store 的使用, 是前端大神coderwhy封裝的他自己的庫(kù)；

首先，我們需要先安裝這個(gè)庫(kù)：npm install hy-event-store

其次，我們可以封裝一個(gè)工具eventbus.js：

import { HyEventBus } from "hy-event-store";
const eventBus = new HyEventBus()
export default eventBus

在項(xiàng)目中導(dǎo)入后可以使用它們：

我們?cè)贏pp.vue中監(jiān)聽(tīng)事件；
我們?cè)贐anner.vue中觸發(fā)事件；

Banner中觸發(fā)事件:

<template>
  <div class="home-content">
    <button @click="btnClick">按鈕</button>
  </div>
</template>

<script>
  import eventBus from './utils/event-bus'

  export default {
    methods: {
      btnClick() {
        console.log("myEvent事件被監(jiān)聽(tīng)")
				// 發(fā)送事件到事件總線上
        eventBus.emit("myEvent", "chenyq", 18, 1.88)
      }
    },
  }
</script>

App中監(jiān)聽(tīng)事件:

<script>
  import eventBus from './utils/event-bus'
  import Home from './Home.vue'

  export default {
    components: {
      Home
    },
    created() {
			// 監(jiān)聽(tīng)事件總線上的事件
      eventBus.on("myEvent", (name, age, height) => {
        console.log(name, age, height)
      })
    },
  }
</script>