vue3实现多个子组件数据共享

在 Vue3 中，可以使用 provide 和 inject 实现多个子组件之间的数据共享。

提供数据的组件使用 provide 函数提供数据，同时在子组件中使用 inject 函数来取出数据。

例如，父组件提供了数据，并添加了两个子组件：

<template>
  <div>
    <child-component-1 />
    <child-component-2 />
  </div>
</template>

<script>
import { provide } from 'vue'
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  },
  setup() {
    const sharedData = '这是共享的数据'
    
    provide('sharedData', sharedData)
  }
}
</script>

然后，在子组件中使用 inject 函数来获取共享的数据：

<template>
  <div>
    <p>子组件1中的数据：{{ sharedData }}</p>
    <p>子组件2中的数据：{{ sharedData }}</p>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const sharedData = inject('sharedData')

    return { sharedData }
  }
}
</script>

这样，两个子组件就可以共享父组件中提供的数据了。注意，在 inject 函数中传入的第一个参数是 provide 函数的第一个参数，即共享数据的键名。