VUE+Element学习笔记（二）VUE+ElementUI值传递_element ui 组件传值

前言

在项目中，左侧菜单点击后，会在右侧新建一个tabs标签页。创建标签页是一个公共方法，参数是菜单node信息，不方便增加参数。但我需要在创建tabs时还要带上一点别的信息，简单来说，就是我要查看详情，除了新建一个查看详情的tabs之外，我还需要带着数据进入新的tabs中。
我试了使用$emit和$on进行监听，发现当$emit组件已经触发事件后，需要$on监听的组件还没有create好，导致无法监听到事件。在调试过程中我发现其实$on方法是会被调用的，但是调用的时候，新tabs页面中的变量还没有被创建，导致值传递失败。于是就使用了一个全局变量，问题暂时解决。
于是，就想记录一下VUE中的值传递的情况。包括父子相传和非父子之间的传递。
在查询资料的过程中，我还发现各位小伙伴对“父子”的定义不一样，为了便于阅读，我这里做个约定：

如果A组件引用了B组件，那么A组件为父组件，B组件为子组件。

父传子

父传子，就是子组件想要使用父组件传递的参数，也就是说，子组件中变量的初始化是在父组件中进行的。父传子，就是指在子组件中定义一些属性值，然后在父组件引用的时候，对这些属性进行赋值。
这个其实是很常见的，比如，在使用el-table的时候，我们会绑定它的数据来源：

<el-table :data="tableData"></el-table>
1

在这里，data就是子组件el-table的一个属性。我们设置:data="tableData"其实就是父组件在给子组件传值了。
那么，问题来了，子组件怎么来定义自己的属性呢？很简单，在子组件的script中定义props：

<!-- 这是子组件的代码,我们以一个dialog的显示和隐藏来说明 -->
<template>
	<el-dialog :visible.sync="showMe" title="Child">
		这是子组件。
	</el-dialog>
</template>
<script>
export default {
	name: 'child',
	props:{
		showMe: {
			type: Boolean, //定义属性showMe的类型，此处为布尔型
			default:()=>{return false} //默认值
		}
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

通过上面的代码，我们就对子组件添加了一个名字叫做showMe的属性，然后再看父组件的引用：

<!-- 这是父组件的代码，它引入了一个子组件child -->
<template>
	<div>
		这是父组件。
		<Child :showMe="showChild"><!-- 这里的showMe就是子组件中定义的props，要完全一致 -->
		</Child>
		<el-button @click="showChildMethod">点击显示或隐藏child</el-button>
	</div>
</template>
<script>
import Child from './child'
export default{
	name: 'parent',
	components:{
		Child
	},
	data(){
		return {
			showChild: false
		}
	},
	methods: {
		showChildMethod(){
			this.showChild = showChild ? false : true;
		}
	}
}
</script>
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

通过上面的代码，父组件就可以将自己的showChild变量的值传递给子组件。

子传父

子传父，就是父组件在调用了子组件后，在子组件中进行了一顿操作，然后想要获取子组件处理后的结果。在父组件中，可以通过绑定事件来获取子组件中的值。
同理，这个也很常见，我们经常会给一些元素绑定一些方法，比如单击事件click，树节点点击后的事件node-click等。这其实就是父组件在使用子组件的数值。而子组件的数值，其实就是这些方法的参数。
那么问题又来了，怎么能给子组件添加一个自定义的事件呢？在子组件中使用$emit就可以了：

<!-- 这是子组件的代码，它会给自己添加一个叫做getValue的自定义事件 -->
<template>
	<el-dialog :visible.sync="showMe" title="Child">
		这是子组件。
		<el-input v-model="myInput"></el-input>
		<el-button @click="sendMyInput">给父组件传值并关闭Dialog</el-button>
	</el-dialog>
</template>
<script>
export default {
	name: 'child',
	props:{
		showMe: {
			type: Boolean, //定义属性showMe的类型，此处为布尔型
			default:()=>{return false} //默认值
		}
	},
	data(){
		myInput: ''
	},
	methods:{
		sendMyInput(){
			this.$emit('getValue',this.myInput); 
			//$emit的第一个参数是自定义的事件名，第二个参数是这个自定义事件的参数值
			//按照我的理解，其实还可以有更多的参数，对应自定义事件getValue的第二个、第三个、第四个参数
		}
	}
}
</script>
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

通过上面的代码，子组件就添加了一个自定义的事件叫做getValue，然后再看父组件中是如何使用的：

<!-- 这是父组件的代码，它引入了一个子组件child -->
<template>
	<div>
		这是父组件。
		<Child :showMe="showChild" @getValue="getValueFromChild">
		<!-- 这里的showMe就是子组件中定义的props; getValue就是子组件中通过emit定义的事件名，要完全一致 -->
		</Child>
		<el-input v-model="showValueFromChild"></el-input>
		<el-button @click="showChildMethod">点击显示或隐藏child</el-button>
	</div>
</template>
<script>
import Child from './child'
export default{
	name: 'parent',
	components:{
		Child
	},
	data(){
		return {
			showChild: false,
			showValueFromChild: ''
		}
	},
	methods: {
		showChildMethod(){
			this.showChild = showChild ? false : true;
		},
		getValueFromChild(input){
			this.showValueFromChild = input; //接收子组件的值，然后赋予自己的变量
			this.showChild  = false; //关闭子组件dialog
		}
	}
}
</script>
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

通过上面的代码，父组件就可以获取子组件中<el-input>中的值了。

通过全局变量传递值

这个就比较简单了，也容易理解，关键就是如何定义一个全局变量：

//这是全局变量文件GlobalVal.vue中的代码，它是一个vue文件，只不过我们只关注script部分
<script>
let globalValOne;
export default{
	globalValOne;
}
</script>
1
2
3
4
5
6
7

组件A对全局变量赋值：

<template>
	<div>
		这是A组件。
		<el-input v-model="inputFromA"></el-input>
		<el-button @click="initGlobalVal">初始化全局变量GlobalOne</el-button>
	</div>
</template>
<script>
import GlobalVal from './GlobalVal.vue'
export default{
	name: 'A',
	data(){
		return{
			inputFromA: ''
		}
	},
	methods:{
		initGlobalVal(){
			GlobalVal.globalValOne = this.inputFromA;
		}
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

组件B使用全局变量：

<template>
	<div>
		这是B组件。
		<el-input v-model="inputOfB"></el-input>
		<el-button @click="getInputFromAByGlobalValOne">初始化全局变量GlobalOne</el-button>
	</div>
</template>
<script>
import GlobalVal from './GlobalVal.vue'
export default{
	name: 'B',
	data(){
		return{
			inputOfB: ''
		}
	},
	methods:{
		getInputFromAByGlobalValOne(){
			this.inputOfB = GlobalVal.globalValOne;
		}
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如上，即可实现通过全局变量来实现值传递。
上面的页面的具体现象为：
在A组件的input中输入任意内容，我们将这段内容记为I_A，然后点击A组件中的按钮。
再进入B组件，点击B组件中的按钮，则B组件中的input中就会显示I_A。