provide/inject依赖注入

最新推荐文章于 2025-06-19 11:26:46 发布

原创最新推荐文章于 2025-06-19 11:26:46 发布 · 883 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文讲解了在Vue应用中利用provide和inject实现组件间数据传递的方法，包括提供值、使用symbol保证唯一性、响应式数据、提供方法和设置readonly属性。通过实例演示了如何在复杂组件结构中简化父子组件间的通信。

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

编写项目过程中，我们会使用props进行父子组件的传值，但是如果组件层级比较复杂，那么就需要依赖注入解决这个问题。

第一步引入provide，inject

import {provide ,inject} from "vue"

1、provide

provide可以提供一个值，可以被后代组件注入，他是一个后代组件依赖的提供人

// root.vue
import { provide } from "vue";

provide("data", {
  name: "cat",
  age: 18,
});

2、inject

inject用于接收provide声明的值

// chlid.vue
import { inject } from "vue";
const data = inject("data");

console.log(data);

// { name: "cat", age: 18}

如果父组件没有为我们提供值，我们可以为inject默认值

// chlid.vue
import { inject } from "vue";
const data = inject("data", {
  name: "cat",
  age: 18,
});

console.log(data);
// log
// { name: "cat", age: 18 }

3、如何确保provide提供的key保持唯一性呢？我们不能确保每位开发人员都使用不同的变量命名？我们使用ES6的symbol唯一值

// root.vue
import { provide } from "vue";
export const dataSymbol=Symbol()

provide(dataSymbol, {
  name: "cat",
  age: 18,
});

// child.vue
import { inject } from "vue";

const data = inject(dataSymbol, {
  name: "cat",
  age: 18,
});

4、提供的数据也可以是响应式的

// root.vue
import { provide，ref} from "vue";
const data=ref({
name:cat,
age:18
})
provide(data.value)

5、也可以提供方法

// root.vue
import { ref, provide } from "vue";


const log= () => {
  console.log("传递方法");
};

provide(log);

// child.vue
import { inject } from "vue";
import { dataSymbol } from "../injectionSymbols";

const { log } = inject(log);

log()

还可以给传递的值添加readonly属性，那么传递的数据就不可改变了