vue3 provide/inject 的用法

通常，我们从父组件向子组件传递数据（或者说子组件接收父组件传递的数据）时，使用 props。当我们想用父组件向深层子组件传递数据时，需要使用 props 沿着组件链逐级传递下去，十分麻烦，这时 provide/inject 就可以派上用场。

论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个inject 选项来开始使用这些数据。

实际上，你可以将依赖注入看作是“long range props”，除了：

• 父组件不需要知道哪些子组件使用它 provide 的 property
• 子组件不需要知道 inject 的 property 来自哪里

<!-- 父组件 -->
<template>
  <div>
    <button @click="handleChange">按钮</button>
    <child-component></child-component>
  </div>
</template>
<script>
  import ChildComponent from '@/components/child-component'
  import { reactive } from 'vue'
  export default {
    components: {
      ChildComponent
    },
    // 注意：要访问组件实例 property，我们需要将 provide 转换为返回对象的函数，否则不起作用
    provide() {
      return {
        obj: this.obj
      }
    },
    setup() {
      const obj = reactive({name: '对象', age:12})
      const handleChange = () => {
        obj.name = '名称改变了'
      }
      return { obj, handleChange }
    }
  }
</script>

<!-- 子组件 child-component -->
<template>
  <div>
    <sun-component></sun-component>
  </div>
</template>
<script>
  import SunComponent from './sun-component'
  export default {
    components: { SunComponent },
  }
</script>

<!-- 孙子组件 sun-component -->
<template>
  <div>
    孙子组件：{{obj.name}}
  </div>
</template>
<script>
  export default {
    inject: ['obj']
  }
</script>