vue3.0兄弟组件传值

在 Vue 3.0 中，可以使用 `provide` 和 `inject` 函数来实现兄弟组件之间的传值。

在父组件中使用 `provide` 函数，将数据传递给子组件：

// Parent.vue
<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

<script>
import { provide } from 'vue';
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  data() {
    return {
      message: 'Hello World!',
    };
  },
  setup() {
    provide('message', 'Hello World!');
  },
};
</script>

在子组件中使用 `inject` 函数，获取父组件传递的数据：

// Child.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return {
      message,
    };
  },
};
</script>

这样就可以在兄弟组件之间传递数据了。需要注意的是，`provide` 和 `inject` 函数需要在 `setup` 函数中使用。此外，`provide` 函数可以传递任何类型的数据，包括对象和函数。