【Vue】provider/inject 祖孙传值

文章目录

- 基本用法
- 使用案例

基本用法

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

父组件：

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

子组件：

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

注意：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>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			//孙子组件
			var child = {
				template: `子组件接收到的值：{{parentObj.msg}}`,
				//子组件中使用 inject接收
				inject: ['parentObj']
			}
			//子组件
			var child2 = {
				template: ` `,
				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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

运行结果：当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>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			//孙子组件
			var child = {
				template: `子组件接收到的值：{{msg}}`,
				//子组件中使用 inject接收
				inject: ['msg']
			}
			//子组件
			var child2 = {
				template: ` `,
				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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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

相关阅读:
C# 继承
【老生谈算法】matlab实现模糊数学模型源码——模糊数学模型
Git与GitHub：解锁版本控制的魔法盒子
薪酬不变，每周只上四天班，英国试行全球最大规模“四天工作制”
根据代码获取properties对应信息
Flutter（四）：SingleChildScrollView、GridView
数据删掉了怎么恢复？数据删除后还能恢复吗
使用Airflow实现简单的工作流调度-大数据培训
I have a dream for Career .
智慧旅游+数字化景区整体解决方案：文件全文83页，附下载

原文地址：https://blog.csdn.net/qq_45677671/article/details/126058373