vue3兄弟组件传递数据

在Vue 3中，兄弟组件之间传递数据可以通过一个共同的父组件来实现数据的传递。具体步骤如下：

1. 在父组件中定义一个数据属性，并将其传递给两个兄弟组件。
2. 在兄弟组件中使用`props`接收父组件传递的数据。
3. 在兄弟组件中修改数据时，通过`$emit`触发自定义事件，将修改后的数据传递给父组件。
4. 在父组件中监听兄弟组件触发的自定义事件，并更新相应的数据。

下面是一个示例代码：

<template>
  <div>
    <child1 :data="sharedData" @updateData="updateData"></child1>
    <child2 :data="sharedData" @updateData="updateData"></child2>
  </div>
</template>

<script>
import { ref } from 'vue';
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';

export default {
  components: {
    Child1,
    Child2
  },
  setup() {
    const sharedData = ref('');

    const updateData = (data) => {
      sharedData.value = data;
    };

    return {
      sharedData,
      updateData
    };
  }
};
</script>

在上面的代码中，父组件通过`sharedData`属性将数据传递给两个兄弟组件`Child1`和`Child2`。兄弟组件通过`props`接收`sharedData`属性，并在需要修改数据时通过`$emit`触发`updateData`事件，将修改后的数据传递给父组件。父组件通过监听`updateData`事件，并在事件处理函数中更新`sharedData`的值。