组件通信-provide和inject

跨层级通信-provide和inject

当组件嵌套层级很深时，使用 Props 层层传递非常痛苦。这时可以使用 provide 和 inject。

我们之前学过，祖孙通信也可以通过$attrs,但是那不是直接的，它还需要通过中间子组件来进行绑定；而这次学习可以直接越过子组件，祖孙之间直接通信；

我们首先在爷爷组件上定义一些数据

vue 复制代码

<template>
  <div class="box">
    <h3>父组件</h3>
    <h4>存款：{{ money }}万元</h4>
    <h4>一辆{{ car.brand }}车,价值{{ car.price }}万元</h4>
    <Child />
  </div>
</template>

<script setup lang="ts">
import Child from './Child.vue'

import { ref, reactive } from 'vue';
let money = ref(100);
let car = reactive({
  brand: '宝马',
  price: 100
})
</script>

然后我们就可以使用provide像孙组件提供数据了，provide接受两个参数，第一个参数式名字，第二个是值

vue 复制代码

import { ref, reactive, provide } from 'vue';
//向后代组件提供数据
provide('money', money)
provide('car', car)

然后我们在孙组件中使用inject注入祖先组件给我提供的数据即可

vue 复制代码

<template>
    <div class="box">
        <h3>孙组件</h3>
        <h4>{{ money }}</h4>
        <h4>{{ car.brand }},{{ car.price }}</h4>
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';

let money = inject('money')
let car = inject('car')
</script>

这里我们会发现这里会有报错

这个报错提示很明显，告诉我们car对象无法推断出它的类型；解决这个麻烦我们可以使用inject的第二个参数，inject的第二个参数是默认值，意思就是如果祖先组件给我们提供的数据突然失效了，那我们就使用我们自己的定义的默认值；

vue 复制代码

<template>
    <div class="box">
        <h3>孙组件</h3>
        <h4>{{ money }}</h4>
        <h4>{{ car.brand }},{{ car.price }}</h4>
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';

let money = inject('money', '未知')
let car = inject('car', { brand: '未知', price: '未知' })
</script>

provide/inject只能向下传递，如果我们向要向上传递的话，就需要祖先组件提供一个方法给后代组件来实现向上传递

例如我们现在定义一更新money的函数

vue 复制代码

function updateMoney(value: number) {
  money.value - + value

}

//像后代组件提供数据
provide('money', { money, updateMoney })
provide('car', car)

一样的，我们还是需要在后代组件中进行注入

vue 复制代码

let { money, updateMoney } = inject('money', { money: 0, updateMoney: (param: number) => { } })

注意这里也要写默认值，不然ts仍然会报错

vue 复制代码

        <button @click="updateMoney(10)">点击拿爷爷的钱</button>

provide/inject 的原理

provide和inject是基于原型链实现的

当创建一个组件实例的时候，provides对象默认会指向父组件的provides对象；
如果这个组件调用了provide，Vue会以父组件provides对象为原型创建一个新的对象，然后将新提供的键值（就是名字和值）添加到这个新的对象上，并复制给当前组件的provides；
所以，当后代在查找注入的时候，会沿着自己的provides对象开始，顺着原型链一路向上查找，直到找到符合的key或者一直到顶端；