【vue3】依赖注 provide、inject（父组件与儿子、孙子、曾孙子组件之间的传值）

一、基本用法：

//父组件
import { ref, provide } from 'vue'
const radio = ref<string>('red')
provide('myColor',radio) //注入依赖//儿子组件、孙子组件、曾孙子组件
import { inject } from 'vue'
import type { Ref } from 'vue';
const myColor = inject<Ref<string>>('myColor') //获取

二、示例：

//parent.vue
<template><div><p>这是父级组件</p><el-radio-group v-model="radio"><el-radio label="red">红色</el-radio><el-radio label="yellow">黄色</el-radio><el-radio label="blue">蓝色</el-radio></el-radio-group><div class="box" :style="setStyle()"></div></div><Son></Son>
</template><script setup lang='ts'>
import { ref, provide } from 'vue'
import Son from '../components/Son.vue';
const radio = ref<string>('red')
provide('myColor',radio) //注入依赖const setStyle = ()=>{return {backgroundColor:radio.value}
}</script>
<style scoped lang='scss'>
.box {width: 200px;height: 200px;border: 1px solid #ccc;transition: all 1s;
}
</style>

//son.vue
<template><div><p>这是儿子组件</p><div class="box" :style="setStyle()"></div></div><Grandson></Grandson></template><script setup lang='ts'>import { inject } from 'vue'import type { Ref } from 'vue'; import Grandson from './Grandson.vue';const myColor = inject<Ref<string>>('myColor')//设置背景颜色-方法一const setStyle = ()=>{return {// backgroundColor:myColor?.value}}</script>
<style scoped lang='scss'>
.box{width: 200px;height: 200px;border: 1px solid #ccc;// 设置背景颜色-方法二background-color: v-bind(myColor);transition: all 1s;
}</style>

//grandSon.vue
<template><div><p>这是孙子组件</p><div class="box"></div></div></template><script setup lang='ts'>import { inject } from 'vue'const myColor = inject('myColor')</script>
<style scoped lang='scss'>
.box{width: 200px;height: 200px;border: 1px solid #ccc;background-color: v-bind(myColor);transition: all 1s;
}</style>