vue3兄弟组件互相传值

在Vue3中，兄弟组件之间可以通过创建一个Vue实例作为第三方媒介来实现数据的传递。具体的步骤如下：
1. 创建一个新的Vue实例，作为兄弟组件之间传值的中转站。
2. 在中转站实例中使用`$on`方法来接收监听传递的值。
3. 在兄弟组件A中，使用`$emit`方法向中转站实例发送需要传递的值。
4. 在兄弟组件B中，通过监听中转站实例接收到的值来获取传递的数据。

以下是一个示例代码，展示了如何在Vue3中实现兄弟组件互相传值：

<!-- 中转站组件 -->
<template>
  <div>
    <component-a @value-updated="handleValueUpdated"></component-a>
    <component-b :flag="flag"></component-b>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const flag = ref(null);

const handleValueUpdated = (value) => {
  flag.value = value;
};
</script>

<!-- 兄弟组件A -->
<template>
  <div>
    <button @click="emitValue">传递值到兄弟组件B</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const emitValue = () => {
  const value = '要传递的值';
  emit('value-updated', value);
};
</script>

<!-- 兄弟组件B -->
<template>
  <div>
    B组件接受的值： {{ flag }}
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import mitt from 'mitt';

const flag = ref(null);
const mitts = mitt();

onBeforeMount(() => {
  mitts.on('value-updated', (value) => {
    flag.value = value;
  });
});
</script>

在这个示例中，我们创建了一个中转站组件，该组件包含了兄弟组件A和兄弟组件B。组件A通过点击按钮触发`emitValue`方法，并使用`emit`方法将值传递给中转站组件。中转站组件使用`handleValueUpdated`方法来接收传递的值并存储在`flag`变量中。组件B通过监听`flag`变量来获取传递的值，并展示在页面上。

以上是在Vue3中实现兄弟组件互相传值的方法。通过创建一个中转站来实现数据的传递，可以方便地在兄弟组件之间共享数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue.js中兄弟组件之间互相传值实例](https://download.csdn.net/download/weixin_38711008/13974235)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue中兄弟组件间传值](https://blog.csdn.net/zoukunyang/article/details/126491426)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue3的兄弟传参（三种方法）](https://blog.csdn.net/weixin_45441173/article/details/126142699)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]