vue3 依赖注入provide/inject

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

场景：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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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类型，在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29