Vue中provide和inject 用法（vue组件爷孙传值）

是小橙丶

已于 2023-04-13 10:17:33 修改

阅读量1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

于 2021-06-08 11:34:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42125732/article/details/117693360

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了Vue.js中的Provide/Inject特性，用于实现父组件向子孙组件传递数据，解决了孙组件无法直接访问祖先组件数据的问题。提供了一个包含父组件、子组件和孙组件的完整DEMO，展示了如何定义和注入数据及方法，以及孙组件如何通过注入接收这些值和方法。

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

1.概念

2.使用示例DEMO

1.概念

　　成对出现：provide和inject是成对出现的

　　作用：用于父组件向子孙组件传递数据

　　使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

　　使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

2.使用示例DEMO

父组件：通过provide指定传递给子孙组件的值和方法

<template>
	<div id="app">
		我是父组件：{{message}}
		<second></second>
	</div>
</template>

<script>
import second from '../components/second.vue'
export default{
	data(){
		return{
			message:'我们一起当前端攻城狮！'
		}
	},
	provide(){ // provide是一个匿名函数，返回一个对象
		return {
			testmethods:this.testmethods,
			message:this.message
		}
	},
	methods:{
		testmethods(){
			console.log('调用了ProvideTest这个组件')
		}
	},
	components:{
		second
	}
}
</script>

<style lang="less" scoped>
	
</style>

子组件：用inject接收父组件的值和方法，并且继续套一个组件

<template>
	<div id="app">
		<p>second组件:{{message}}</p>
		<third></third>
	</div>
</template>

<script>
import third from './third.vue'
export default{
	data(){
		return{
			
		}
	},
	inject:['message','testmethods'],
	mounted() {
		this.testmethods()
	},
	components:{
		third
	}
}
</script>

<style lang="less" scoped>
	
</style>

重点来了，我们称之为

孙组件：

<template>
	<div id="app">
		<p>third组件:{{message}}</p>
	</div>
</template>

<script>
export default{
	data(){
		return{
			
		}
	},
	//inject:['message','testmethods'], 简写
	inject:{ // 详细指定来源以及默认值
		message:{
			from:'message', //表示从组件ProvideTest传递过来的
			//default:'message' //默认值
		},
		testmethods:{
			form:'testmethods'
		}
	},
	mounted() {
		this.testmethods()
	},
}
</script>

<style lang="less" scoped>
	
</style>

效果下图所示