通过依赖注入进行组件中传值（vue3+ts)

 父组件通过provide进行传值，子组件使用inject接收

效果：

1.父级组件 

<template>
  <div class="box">父级组件</div>
  <input type="radio" value="red" v-model="colorVal">red
  <input type="radio" value="blue" v-model="colorVal">blue
  <input type="radio" value="green" v-model="colorVal">green
  <providerA></providerA>
</template>
<script setup lang="ts">
import providerA from './components/providerA.vue';
import { provide, ref } from 'vue';
const colorVal = ref<string>('red');
provide('color', colorVal);
//如果不想让子组件修改 加上readonly即可
//import { readonly } from 'vue';
//provide('color', readonly(colorVal));
</script>

2.子组件

<template>
    <div class="box">子组件</div>
    <providerB></providerB>
</template>
<script setup lang="ts">
import providerB from './providerB.vue';
import { inject, Ref } from 'vue';
const color = inject<Ref<string>>('color')
</script>
<style scoped>
.box {
    height: 50px;
    width: 100px;
    border: 1px solid #ccc;
    /* vue3可以绑定样式 */
    background: v-bind(color);
}
</style>

3.孙子组件

<template>

<div class="box" >
    孙子组件
</div>
<button @click="change">修改color</button>
</template>

<script setup lang="ts">
import { inject ,Ref,ref} from 'vue';
const color=inject<Ref<string>>('color',ref('red'))
const change=()=>{
    // color?.value='pink'//报错修改
    color!.value='pink' //非空断言或者给color一个默认值
}
</script>
<style scoped>
.box{
    height: 50px;
    width: 100px;
    border: 1px solid #ccc;
    /* vue3可以绑定样式 */
    background: v-bind(color);
}
</style>