vue3.0 带响应式的 provide与inject用法

provide与inject主要用于从父组件向子组件传递数据。

在2.0我们通常用props接收来自父组件的参数，但是一个要从父子组件传递到孙子组件，这种情况就得从父组件到子组件，再从子组件传到孙子组件一级一级传递下去；引入 provide与inject就不需要一级一级向下传递。而是只需从父组件provide出去，再在需要用的组件里面inject即可。如图

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

官网：Provide / Inject | Vue.js

上用法：

父组件：

<template>
<div>
    <div   @click="changeVlaue()"> 点击改变</div>
    
</div>
</template>
import {
  reactive,
  provide,
  ref
} from 'vue'
 setup() {
    const type= ref("business"); //加上响应式，加上后父组件改变此值所有子组件的值都会跟着变
    //const type= "business"; //不加响应式，父组件调用了changeVlaue改变值后，子组件不会跟着一起改变
    //const type= reactive({type:"business"}); //另一种响应式，用哪种都行，只是取值的方式不一样
    provide('AssetsType', type)
    const methods = {
     changeVlaue: () => {
        type.value='我改变了'
      },
    }
    return {
      ...toRefs(methods),
      type
    }

}

子组件：

<template>
<div>
    <div> {{AssetsType}}</div>
    <div> {{test}}</div>
</div>
</template>
import {
  reactive,
  inject,
} from 'vue'

setup() {
    //用法一
     const test = inject('AssetsType')
    //用法二
    const state: any = reactive({
      AssetsType:inject('AssetsType')
    })
return {
      ...toRefs(state),
      test
    }

}

记录用法：详细看官网