vue3如何进行数据依赖注入provide/inject

泠泠在路上

于 2023-02-22 14:31:30 发布

阅读量325

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/u012396955/article/details/129159821

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

Vue提供了一种依赖注入的方式，通过`provide`在祖父级组件中分发数据或方法，然后在任何子孙级组件中使用`inject`来接收这些数据。这种方法允许不通过props直接将数据从高层组件传递到深层组件，例子中展示了如何设置和使用`flag`变量在祖父和子孙组件之间通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中的依赖注入方式是使用函数原型链来进行实现的

当父组件有很多数据需要分发给其子代组件的时候，就可以使用provide和inject，在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

在这里插入图片描述


//祖父级组件

<template>
    <div class="App">
        <button>我是祖父级组件</button>
        <A></A>
    </div>
</template>
    
<script setup lang='ts'>
import { provide, ref } from 'vue'
import A from './components/A.vue'
let flag = ref<number>(1)
provide('flag', flag)
</script>


//子孙级组件

<template>
    <div style="background-color: green;">
        我是子孙级组件
        <button @click="change">change falg</button>
        <div>{{ flag }}</div>
    </div>
</template>
    
<script setup lang='ts'>
import { inject, Ref, ref } from 'vue'
 
const flag = inject<Ref<number>>('flag', ref(1))
const change = () => {
    flag.value = 2
}
</script>