vue3中兄弟组件通信

在 Vue3 中，兄弟组件间的通信通常有几种方式：

1. **事件总线（Event Bus）**：创建一个独立的 Vue 实例作为事件总线，通过它发布和监听自定义事件。所有需要通讯的组件都可以订阅这个事件，以便接收通知。

// 创建事件总线
const eventBus = new Vue();

// 发布事件
eventBus.$emit('custom-event', { data });

// 订阅事件
eventBus.$on('custom-event', (data) => {
  // 处理接收到的数据
});

2. **Vuex**：如果数据需要在多个组件之间共享，可以使用 Vuex 状态管理库。将数据存储在 store 中，然后通过 actions 和 mutations 更新状态，组件通过 getters 获取数据。

3. **自定义属性（Props）**：虽然这主要是用于父子组件间的通信，但在某些特殊场景下，子组件也可以通过 `$emit` 传递信息给父组件，父组件再通过 prop 将消息传递给其他兄弟组件。

4. **提供一个公共服务（Service）**：在单文件组件之外创建一个 Vue.js 插件，供需要的组件访问，这种方式可以避免全局污染。

5. **使用 ActionCable 或 WebSocket**：当实时通信需求较高时，可以借助第三方库如 ActionCable 进行网络通信，处理服务器端到客户端的消息推送。

相关问题

vue3 兄弟组件通信

在 Vue3 中，可以使用 `provide` 和 `inject` 实现兄弟组件之间的通信。

具体地，兄弟组件之间的通信需要一个共同的父组件，父组件中使用 `provide` 方法提供一个属性或方法，然后兄弟组件中使用 `inject` 方法注入该属性或方法，就可以实现通信了。

下面是一个示例代码：

<template>
  <div>
    <child-a />
    <child-b />
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'

export default {
  components: {
    ChildA,
    ChildB
  },
  setup() {
    const message = ref('Hello, world!')
    provide('message', message) // 提供共享数据

    return {
      message
    }
  }
}
</script>

在上面的代码中，父组件通过 `provide` 方法提供了一个名为 `message` 的共享数据。然后，在 `ChildA` 和 `ChildB` 组件中，可以使用 `inject` 方法注入该数据：

<!-- ChildA.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change message</button>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message') // 注入共享数据

    function changeMessage() {
      message.value = 'Hello, Vue3!'
    }

    return {
      message,
      changeMessage
    }
  }
}
</script>

<!-- ChildB.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message') // 注入共享数据

    return {
      message
    }
  }
}
</script>

在上面的代码中，`ChildA` 组件中通过 `inject` 方法注入了 `message` 数据，并且提供了一个修改数据的方法 `changeMessage`。`ChildB` 组件中也通过 `inject` 方法注入了 `message` 数据，然后直接使用了该数据。

这样，当 `ChildA` 组件中的按钮被点击时，就可以修改 `message` 数据，然后 `ChildB` 组件中的数据也会随之更新。这就实现了兄弟组件之间的通信。

vue3兄弟组件通信

在Vue3中，官方已经移除了eventBus作为兄弟组件通信的方案，推荐使用更为专业的mitt工具[2]。然而，在绝大多数情况下，官方并不鼓励使用全局的事件总线在组件之间进行通信[3]。相反，Vue3提供了一些其他的替代方案来实现兄弟组件通信。

首选的方法是使用props和事件来实现父子组件之间的通信。兄弟节点可以通过它们的共同父节点来进行通信[3]。

另一种方法是使用provide和inject来实现组件与其插槽内容之间的通信。这对于紧密耦合的组件非常有用，并且也可以用于组件之间的远距离通信[3]。

如果需要管理全局状态，可以考虑使用Vuex来进行兄弟组件通信[3]。

综上所述，Vue3中推荐的兄弟组件通信方案是通过props和事件进行父子组件之间的通信，使用provide和inject进行组件与插槽内容之间的通信，或者使用Vuex进行全局状态管理。