建议在非父子(或不相关)组件传值时进行使用
场景: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>