Vue3.x中的Provider Inject

我们可以使用 provide 和 inject 对父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这个数据。

src/components/MySon.vue

<template>
  <MyGson />
</template>

<script>
import MyGson from './MyGson.vue'
import {computed} from "vue"

export default {
  components: {
    MyGson
  },
  data () {
        return {
          name:""
        }
   },
  provide(){
    //共享一个动态的数据
    name:computed(()=>{this.name})
  }
}
</script>

src/components/MyGson.vue 

<template>
<!-- 接收响应式数据需要使用.value的方式使用 ，不是响应式数据直接使用属性名即可 -->
  <h2>接收到的数据{{name.value}}</h2>
</template>
<script>
export default {

  inject: ['name']
}
</script>

​