vue3 实现组件通信

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

`provide` 和 `inject` 用于在父组件中提供数据，然后在子组件中使用 `inject` 注入数据。这种方式可以实现跨级组件之间的通信。

以下是一个示例：

<!-- Parent.vue -->
<template>
  <div>
    <Child1 />
    <Child2 />
  </div>
</template>

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

export default {
  components: {
    Child1,
    Child2
  },
  setup() {
    const data = 'Hello, Vue 3!';
    provide('data', data);
  }
};
</script>

<!-- Child1.vue -->
<template>
  <div>{{ data }}</div>
</template>

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

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

<!-- Child2.vue -->
<template>
  <div>{{ data }}</div>
</template>

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

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

在上面的示例中，`Parent.vue` 中的 `provide` 方法提供了一个名为 `data` 的数据，然后在 `Child1.vue` 和 `Child2.vue` 中使用 `inject` 方法来注入这个数据。这样就实现了组件之间的通信。