简介：

上两篇文章我们记录了部分组件的数据传递的方式，今天我们在记录一下另外的一种数据传递方式，使用provide和inject来传递数据。

使用背景

他的使用背景跟上一篇讲过的$attrs有点类似，是为了跨组件（上下级关系）的数据传递，相比较而言两者在使用中的不同。

• $attrs在使用中如果是跨组件传递数据中，即使中间组件中不使用这些属性也需要在中间组件中传递中转一下。
• provide和inject的使用可能更方便一点，他只需要在父组件中提供数据，然后在下面的子组件（不论多少层）中都能够获取到数据，减少了多层组件之间的耦合。

使用规则

• provide()：提供一个数据，可以被后代子组件使用。

provide(key, value) 有两个参数，

其中key：表示的是一个唯一识别的key标识，推荐使用Symbol也可以用一个String字符串；

value：是真实需要共享传递的数据；

注意：provide()必须需要在组件的setup()中使用；

使用实例

<script setup>
  import { ref, provide  } from "vue"

  provide('nameAge', "100")

  //需注意该Symbol必须是全局变量，提供数据和获取数据都引用相同的Symbol
  const ageSymbol = Symbol('user age symbol');
  provide(ageSymbol, "80")

</script>

• inject()获取provide()提供的数据

inject(key, defaultValue,treatDefaultAsFactory) 有两个参数，

key：表示的是一个唯一识别的key标识，用来标识获取provide()提供的值，需要跟provide()的相同；

defaultValue：表示如果获取不到值的情况下的默认值，如果不写获取到的将会是是undefinded。

treatDefaultAsFactory：boolean类型，如果第二个参数为一个工厂函数（用来构造一个比较复杂的值）的话，需要设置成true，如果设置成false的话获取到的将是第二个函数本身不是函数构造的值（注意）。

注意：如果第二个是工厂函数的话需要第二个和第三个参数需要搭配使用。

使用实例

<!-- 父组件 -->
<template>
  <div class="greetings">
    <h1 class="green">我是父组件</h1>
    <!-- <div>父组件姓名：{{ userName }}</div> -->

    <div class="child-view">
      <ChildView5 ref="child" />
    </div>

  </div>
</template>

<script setup>

import ChildView5 from './ChildView5.vue'

import { ageSymbol, sexSymbol  } from "./symbolData"

import { ref, provide  } from "vue"


let provideData = ref("初始化姓名")
provide('name', provideData)

provide(ageSymbol, "80")

provide(sexSymbol, "男")



</script>

<!-- 子组件 -->
<template>
  <div class="container">
    <h1 class="green">我是子组件</h1>
    <div>姓名:{{ name }}</div>
    <div>用户年龄:{{ userAge }}</div>
    <div>用户性别:{{ userSex }}</div>
    <div>自定义数据:{{ userCustom }}</div>
  </div>
</template>

<script setup>
import { reactive, ref, inject  } from "vue"

import { ageSymbol, sexSymbol,customSymbol  } from "./symbolData"

let name = inject('name',"")
let userAge = inject(ageSymbol,"")
let userSex = inject(sexSymbol,"")
let userCustom = inject(customSymbol,()=>{
  return "我是张三"+"今年三岁了"
},true)

</script>

<!-- symbolData.js -->
export const ageSymbol = Symbol('user age symbol');

export const sexSymbol = Symbol('user sex symbol');

export const customSymbol = Symbol('user custom symbol');

执行结果

总结：

从上面的实例中我们可以看到provide和inject是可以实现数据的传递，并且在保证是上下级关系的情况下是可以实现跨多层级数据传递共享。

注意：这种方式优点在于可以更方便的解耦了组件的关联。但是需要我们开发注意的不要泛滥的使用，产生不必要的维护成本，他适合做全局数据的传递。

上面的观点仅限于本人自己的使用学习中遇到的问题，上面的解析也仅限于本人的简单理解，如果有哪里不对的地方欢迎大家提出来。