vue3 依赖注入Provide / Inject

Provide / Inject：

在我学习依赖注入之前，一般父组件传给孙组件一般是通过prop一层一层的传递，这样的嵌套就会相对繁琐，Provide / Inject：就很好的解决了这一问题。

先看效果：

 这里我定义了三个组件，index.vue作为爷爷级别的组件，Aview作为儿子级别的组件，Bview作为孙子级别的组件。在index.vue定义颜色，用provide抛出去，在子组件和孙组件中用Inject接收其值。看代码

index.vue（爷爷级别组件）：

<template>
    <div class="">
        <label>
            <input type="radio" value="red" v-model="colorVal">红色
        </label>
        <label>
            <input type="radio" value="green" v-model="colorVal"> 绿色
        </label>
        <label>
            <input type="radio" value="yellow" v-model="colorVal"> 黄色
        </label>
        <h1>index.vue-我是爷爷组件:</h1>
        <div class="box"></div>
        <hr>
        <Aview />
    </div>
</template>


<script setup lang='ts'>
import Aview from './componenys/Aview.vue'
import { ref, provide, readonly } from "vue"
const colorVal = ref<string>('red')

provide('color', colorVal)
// provide('color', readonly(colorVal))  //添加readonly的话，子组件就不可以修改依赖注入的值

</script>

<style lang="less" scoped>
.box {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background: v-bind(colorVal);
}
</style>

Aview.vue（儿子级别组件）：

<template>
    Aview.vue-儿子组件：
    <div class="box"></div>
    <hr>
    <Bview />
</template>
 
<script setup lang='ts'>
import Bview from './Bview.vue'
import type { Ref } from 'vue'
import { ref, inject } from "vue"

const color = inject<Ref<string>>('color')
</script>

<style lang="less" scoped>
.box {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background: v-bind(color);
}
</style>

Bview(孙子级别组件)：

<template>
    Bview.vue-孙子组件：
    <button @click="btnClick">改变</button>
    <div class="box"></div>
</template>

<script setup lang='ts'>
import { ref, inject } from "vue"
import type { Ref } from 'vue'


const color = inject<Ref<string>>('color')

const btnClick = () => {
    color!.value = 'purple'  //非空断言
}
</script>

<style lang="less" scoped>
.box {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background: v-bind(color);
}
</style>

备注：一般情况下，使用依赖注入Provide / Inject的组件，子组件修改内容也会影响到相关联的组件，阻止方法：/provide('color', readonly(colorVal))  ，添加readonly的话，子组件就不可以修改依赖注入的值