建议在非父子（或不相关）组件传值时进行使用

场景：App.vue 引用了A组件，A组件中有引用了B组件，甚至B有引用了C组件等时，这些组件共同使用了一个值，建议使用provide/inject的方式进行传值。

注意：

• 1 vue3 中可以使用v-bind方式绑定script里的变量
• -2 在组件中更改inject传递过来的值，其它组件通过reject传递的值也会进行更改。

代码示例如下：

App.vue 组件：

<template><div>App 引入A B 组件</div><div class="test-provide"></div><A></A>
</template><script setup lang="ts">
import { ref, provide } from 'vue';
// vue3中 组件引入后，可直接使用
import A from './A.vue'const colorValue = ref<string>('red')// 需要两个参数，类似于key，value
provide('color',colorValue)</script><style lang="scss" scoped>
.test-provide {width:20px;height: 20px;background: v-bind(colorValue);
}</style>

A.vue

<template><div>A component</div><div class="test-provide"></div><B></B>
</template><script setup lang="ts" name="A">
import B from './B.vue'
import { inject } from 'vue'
// 引入 类型
import type {Ref} from 'vue'// 由于App.vue 传递的是ref<String>类型，在inject接收的时候需增加泛型，要不会是unkonw类型
const colorValue = inject<Ref<String>>('color')
</script><style scoped>
.test-provide {width:20px;height: 20px;/* vue3 中可以使用v-bind方式绑定script里的变量 */background: v-bind(colorValue);}
</style>

B.vue

<template><div>B component</div><div class="test-provide"></div><button @click="updateColor">修改颜色值</button>
</template><script setup lang="ts" name="B">
import { inject } from 'vue'
import type {Ref} from 'vue'const colorValue = inject<Ref<String>>('color')// 可通过在组件中更改值，其它组件中的值也会进行更改
const updateColor = ()=>{colorValue.value = 'yellow'
}
</script><style scoped>
.test-provide {width:20px;height: 20px;background: v-bind(colorValue);}
</style>