Vue3中如何以惯用方式触发兄弟组件的效果？

需求描述 #

有两个并排组件<Sibling1>和<Sibling2>，点击<Sibling1>的按钮时触发<Sibling2>的特定效果，要求：

• 逻辑仅存在于父组件内部，无需全局实现
• 难以将<Sibling2>的效果逻辑移出到父组件中实现

你当前的实现代码如下：

<!-- App.vue (父组件) -->
<script setup>
import { ref } from 'vue'
const trigger = ref(null)
function setTrigger() {
  trigger.value = Symbol('new trigger')
}
</script>

<template>
    <SiblingOne @on-click="setTrigger" />
    <SiblingTwo :trigger="trigger" />
</template>

<!-- Sibling1.vue -->
<script setup>
const emit = defineEmits(['on-click'])
</script>

<template>
  <button @click="emit('on-click')">update</button>
</template>

<!-- Sibling2.vue -->
<script setup>
import { watch } from 'vue'
const props = defineProps({ trigger: null })

watch(
  () => props.trigger,
  () => console.log(new Date())
)
</script>
<template>Nothing to see here, check console</template>

以下是几种更符合Vue3设计理念的优质实现方案：

方案1：Provide/Inject（推荐） #

利用Vue3的provide和inject在父组件内部建立局部通信通道，无需全局事件总线，也不用手动传递大量props/emit：

<!-- App.vue (父组件) -->
<script setup>
import { ref, provide } from 'vue'
// 创建响应式触发信号
const siblingTrigger = ref(0)
// 提供通信所需的方法和信号，仅当前父组件子树可访问
provide('siblingComm', {
  trigger: siblingTrigger,
  triggerSibling: () => {
    siblingTrigger.value++
  }
})
</script>

<template>
    <SiblingOne />
    <SiblingTwo />
</template>

<!-- Sibling1.vue -->
<script setup>
import { inject } from 'vue'
const { triggerSibling } = inject('siblingComm')
</script>

<template>
  <button @click="triggerSibling">update</button>
</template>

<!-- Sibling2.vue -->
<script setup>
import { inject, watch } from 'vue'
const { trigger } = inject('siblingComm')

watch(trigger, () => {
  console.log(new Date())
})
</script>
<template>Nothing to see here, check console</template>

优势：通信逻辑封装在父组件内，仅作用于当前组件树，符合Vue3的组件依赖注入设计，代码更简洁。

方案2：局部事件总线（使用mitt） #

如果更习惯事件订阅/发布模式，可以在父组件中创建局部事件总线实例，避免全局污染：
首先安装依赖：npm install mitt

<!-- App.vue (父组件) -->
<script setup>
import mitt from 'mitt'
// 创建局部事件总线实例
const emitter = mitt()
</script>

<template>
    <SiblingOne :emitter="emitter" />
    <SiblingTwo :emitter="emitter" />
</template>

<!-- Sibling1.vue -->
<script setup>
const props = defineProps({ emitter: Object })
</script>

<template>
  <button @click="props.emitter.emit('sibling-update')">update</button>
</template>

<!-- Sibling2.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue'
const props = defineProps({ emitter: Object })

function handleUpdate() {
  console.log(new Date())
}

// 组件挂载时订阅事件
onMounted(() => {
  props.emitter.on('sibling-update', handleUpdate)
})

// 组件卸载时取消订阅，避免内存泄漏
onUnmounted(() => {
  props.emitter.off('sibling-update', handleUpdate)
})
</script>
<template>Nothing to see here, check console</template>

优势：事件语义清晰，适合复杂的兄弟组件交互场景，完全局部化，不会影响全局。

方案3：优化你的原始实现 #

你的思路本身可行，只需做细节优化让代码更简洁直观：

<!-- App.vue (父组件) -->
<script setup>
import { ref } from 'vue'
// 用数字自增替代Symbol，更直观
const trigger = ref(0)
const setTrigger = () => trigger.value++
</script>

<template>
    <SiblingOne @on-click="setTrigger" />
    <SiblingTwo :trigger="trigger" />
</template>

<!-- Sibling2.vue -->
<script setup>
import { watchEffect } from 'vue'
const props = defineProps({ trigger: Number })

// 用watchEffect简化监听逻辑，自动追踪依赖
watchEffect(() => {
  // 读取trigger触发依赖追踪
  props.trigger
  console.log(new Date())
})
</script>

优势：保留你原本的实现思路，改动小，适合简单的触发场景。

内容的提问来源于stack exchange，提问作者Artur Carvalho