【Vue】provider/inject 祖孙传值

最新推荐文章于 2024-04-06 22:59:58 发布

一颗不甘坠落的流星

最新推荐文章于 2024-04-06 22:59:58 发布

阅读量1.1k

点赞数

分类专栏： Vue 全家桶文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45677671/article/details/126058373

版权

Vue 全家桶专栏收录该内容

32 篇文章 45 订阅

订阅专栏

文章目录

- 基本用法
- 使用案例

基本用法

provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。

父组件：

export default {
  provide: { // 它的作用就是将 **name** 这个变量提供给它的所有子组件。
    name: 'Jack'
  }
}

子组件：

export default {
  inject: ['name'], // 注入了从父组件中提供的name变量
  mounted () {
    console.log(this.name);  // Jack
  }
}

注意：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。当然也有解决方法，会在案例中讲解。

使用案例

示例：不响应案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<child2></child2>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//孙子组件
			var child = {
				template: `<div>子组件接收到的值：{{parentObj.msg}}</div>`,
				//子组件中使用 inject接收
				inject: ['parentObj']
			}
			//子组件
			var child2 = {
				template: `<div><child></child> </div>`,
				components: {
					child
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg: "cc",
				},
				//父组件中 使用 provide 传参
				//对象的写法只能传常量
				//provide: { msg: 'hhhh' },
				//如果想要传变量，provide必须写成函数的形式
				provide() {
					return {
						parentObj: this
					}
				},
				components: {
					child2
				}
			})
		</script>
	</body>
</html>

运行结果：当input框值改变的时候，传的给孙子组件的值并没发生变化

在这里插入图片描述

示例：可响应案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<child2></child2>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//孙子组件
			var child = {
				template: `<div>子组件接收到的值：{{msg}}</div>`,
				//子组件中使用 inject接收
				inject: ['msg']
			}
			//子组件
			var child2 = {
				template: `<div><child></child> </div>`,
				components: {
					child
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg: "cc",
				},
				//父组件中 使用 provide 传参
				//对象的写法只能传常量
				//provide: { msg: 'hhhh' },
				//如果想要传变量，provide必须写成函数的形式
				provide() {
					return {
						msg: this.msg
					}
				},
				components: {
					child2
				}
			})
		</script>
	</body>
</html>