Vue3优雅的实现跨组件通信的常用方法总结

<!-- 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>公众号：萌萌哒草头将军</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>

<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>公众号：萌萌哒草头将军</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>

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

<template>
  <Child />
</template>

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

<template>
  <h4>公众号：萌萌哒草头将军</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>

<!-- 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>公众号：萌萌哒草头将军</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>

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

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

  // 发布事件
  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>公众号：萌萌哒草头将军</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>