快捷導(dǎo)航

Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)

更新時(shí)間：2023年11月13日 09:15:50 作者：萌萌噠草頭將軍

開發(fā)中經(jīng)常會(huì)遇到跨組件通信的場景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法,文中通過代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下

前言

開發(fā)中經(jīng)常會(huì)遇到跨組件通信的場景。props 逐層傳遞的方法實(shí)在是太不優(yōu)雅了，所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法。

依賴注入

<!-- App.vue -->
<script setup lang="ts">
import { ref, provide } from "vue";
import Child from "./components/Child.vue";
const count = ref(0)
const updateCount = () => count.value ++
provide("count", {count, updateCount})
</script>

<template>
  <h4>公眾號(hào)：萌萌噠草頭將軍</h4>
  <div>{{ count }}</div>
  <button @click="updateCount">change</button>
  <Child />
</template>

<!-- Child.vue -->
<template>
  <Other />
</template>
  
<script setup lang='ts'>
import Other from "./other.vue"
</script>

在 setup 組件中，使用 inject 跨組件通信是最佳的方案。所以該模式下，是沒有提供event bus 事件總線。

但是在 option api 模式下，還需要額外的注冊，顯的有點(diǎn)麻煩。

<script lang='ts'>
export default {
  emits: ["some-name"]
}
</script>

屬性透傳

<!-- App.vue -->
<script setup lang="ts">
import { ref, provide } from "vue";
import Attr from "./components/Attr.vue";
const count = ref(0)
const updateCount = () => count.value ++
provide("count", {count, updateCount})
</script>

<template>
  <h4>公眾號(hào)：萌萌噠草頭將軍</h4>
  <div>{{ count }}</div>
  <button @click="updateCount">change</button>
  <Attr :count="count" :updateCount="updateCount" />
</template>

<!-- Attr.vue -->
<template>
  <div>attr component</div>
  <Child v-bind="$attrs" />
</template>
  
<script setup lang='ts'>
import Child from './Child.vue';
</script>

屬性透傳這種方式類似于react中手動(dòng)透傳屬性。感覺有點(diǎn)暴力，但是又特別方便快捷。

function App (props) {
  return <Other {...props} />
}

Vue中默認(rèn)透傳的屬性有 style、class、key。如果子組件也存在class、style，則會(huì)自動(dòng)合并class、style。

如果你的子組件是根組件時(shí)，可以省略 v-bind="$attrs"。

<template>
  <Child />
</template>

狀態(tài)庫

狀態(tài)管理庫我們以Pinia為例。

<!-- App.vue -->
<script setup lang="ts">
import Other from "./components/Other.vue";
import { useCounterStore } from "./store/index"
const state = useCounterStore()
</script>

<template>
  <h4>公眾號(hào)：萌萌噠草頭將軍</h4>
  <div>{{ count }}</div>
  <button @click="updateCount">change</button>
  <Other />
</template>

import { defineStore } from "pinia" 
import { ref } from "vue"

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function updateCount() {
    count.value++
  }

  return { count, updateCount }
})

<!-- Other.vue -->
<template>
  <div>pinia store</div>
  <div>{{ state.count }}</div>
  <button @click="state.updateCount">other change</button>
</template>
  
<script setup lang='ts'>
import { useCounterStore } from '../store';
const state = useCounterStore()
</script>

狀態(tài)管理庫最大的缺點(diǎn)是，沒法使用解構(gòu)語法。因?yàn)檫@會(huì)導(dǎo)致失去響應(yīng)式的能力。

事件總線

事件總線（event bus）比較特殊，因?yàn)樵诮M合式API里不支持該方式，所以下面的例子適合 Option API 組件。

<!-- App.vue -->
<script setup lang="ts">
import { ref } from "vue";
import Other from "./components/Other.vue";
const count = ref(0)
const updateCount = () => count.value ++
</script>

<template>
  <h4>公眾號(hào)：萌萌噠草頭將軍</h4>
  <div>{{ count }}</div>
  <button @click="updateCount">change</button>
  <Other @updateCount="updateCount()" />
</template>

<!-- Other.vue -->
<template>
  <div>eventBus store</div>
  <button @click="$emit('updateCount')">other change</button>
</template>
  
<script lang='ts'>
export default {
  emits: ["updateCount"]
}
</script>

事件總線更適合傳遞事件。

自定義事件

但是有時(shí)候，你可能非常想使用事件總線的方式在 setup 組件中傳遞事件，這時(shí)候我們可以使用自定義的事件的方式實(shí)現(xiàn)這種功能。

下面是實(shí)現(xiàn)。

class EventBus {
  constructor() {
    this.events = {};
  }

  // 訂閱事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  // 發(fā)布事件
  emit(eventName, eventData) {
    const eventCallbacks = this.events[eventName];
    if (eventCallbacks) {
      eventCallbacks.forEach(callback => {
        callback(eventData);
      });
    }
  }

  // 取消訂閱事件
  off(eventName, callback) {
    const eventCallbacks = this.events[eventName];
    if (eventCallbacks) {
      this.events[eventName] = eventCallbacks.filter(cb => cb !== callback);
    }
  }
}

export const eventBus = new EventBus()

<!-- App.vue -->
<script setup lang="ts">
import { ref } from "vue";
import Other from "./components/Other.vue";
import { eventBus } from "./store/eventBus";
const count = ref(0)
const updateCount = () => count.value ++
eventBus.on("updateCount", updateCount)
</script>

<template>
  <h4>公眾號(hào)：萌萌噠草頭將軍</h4>
  <div>{{ count }}</div>
  <button @click="updateCount">change</button>
  <Other @updateCount="updateCount()" />
</template>

<!-- Other.vue -->
<template>
  <div>eventBus</div>
  <button @click="eventBus.emit('updateCount', null)">other change</button>
</template>
  
<script setup lang='ts'>
import { eventBus } from "../store/eventBus";
</script>