Vue3-provide 和 inject 跨组件传递数据

Vue3-provide 和 inject 跨组件传递数据

• 功能：将数据从App组件跨过一个组件传递到B组件中
• provide：提供数据
• inject：接收数据

// App.vue
<template>
    <h2>我是App组件（{{num}}）</h2>
    <A></A>
</template>

<script setup>
    import A from './components/A.vue'
    import { provide, ref } from 'vue'
    let num = ref(1)
    provide('app', num)
</script>
1
2
3
4
5
6
7
8
9
10
11
12

// A.vue
<template>
    <h2>我是A组件</h2>
    <B></B>
</template>

<script setup>
    import B from './B.vue'
</script>
1
2
3
4
5
6
7
8
9

// B.vue
<template>
    <h2>我是B组件（{{num}}）</h2>
</template>

<script setup>
    import { inject } from "vue";
    let num = inject('app')
</script>
1
2
3
4
5
6
7
8
9