vue 的provide/inject

最新推荐文章于 2025-01-15 19:14:00 发布

zeroyulong

最新推荐文章于 2025-01-15 19:14:00 发布

阅读量236

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2.x 文章标签： vue provide vue inject

本文链接：https://blog.youkuaiyun.com/zeroyulong/article/details/89382745

vue2.x 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了Vue.js中的provide/inject特性，这是一种高级组件通信方式，允许祖先组件向子孙组件注入依赖，不论组件层级多深。通过实例演示了在复杂组件结构中如何简化数据传递，提高开发效率。

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

类型：
- provide：Object | () => Object
- inject：Array<string> | { [key: string]: string | Symbol | Object }
详细：

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 选项应该是一个字符串数组，或一个对象

我们常用的组件通信是利用prop和props，那么当组件嵌套层次超过两层时，通信会变得十分麻烦，如有A（爷爷）、B（父亲）、C（儿子）三级，C想访问A的数据，则需要B先从A处得到并传给C，然而B并未使用到A处的数据。provide/inject的出现完美的解决了该问题，无论D层，Z层都可快捷的访问到A的数据。

A.vue

<template>
	<div>
		<b prop="data"></b>
	</div>
</template>
 
<script>
export default {
	name: 'A',
	provide: {
		money: '10000000'
	}
}
</script>

C.vue

<template>
	<div>
		<c >{{money}}</c>
	</div>
</template>
 
<script>
export default {
	name: 'C',
	inject: ['money']
	
}
</script>