在项目中,左侧菜单点击后,会在右侧新建一个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>
在这里,data就是子组件el-table的一个属性。我们设置:data="tableData"
其实就是父组件在给子组件传值了。
那么,问题来了,子组件怎么来定义自己的属性呢?很简单,在子组件的script中定义props:
<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>
通过上面的代码,我们就对子组件添加了一个名字叫做showMe
的属性,然后再看父组件的引用:
<template>
<div>
这是父组件。
<Child :showMe="showChild">
Child>
<el-button @click="showChildMethod">点击显示或隐藏childel-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>
通过上面的代码,父组件就可以将自己的showChild变量的值传递给子组件。
子传父,就是父组件在调用了子组件后,在子组件中进行了一顿操作,然后想要获取子组件处理后的结果。在父组件中,可以通过绑定事件来获取子组件中的值。
同理,这个也很常见,我们经常会给一些元素绑定一些方法,比如单击事件click,树节点点击后的事件node-click等。这其实就是父组件在使用子组件的数值。而子组件的数值,其实就是这些方法的参数。
那么问题又来了,怎么能给子组件添加一个自定义的事件呢?在子组件中使用$emit
就可以了:
<template>
<el-dialog :visible.sync="showMe" title="Child">
这是子组件。
<el-input v-model="myInput">el-input>
<el-button @click="sendMyInput">给父组件传值并关闭Dialogel-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>
通过上面的代码,子组件就添加了一个自定义的事件叫做getValue,然后再看父组件中是如何使用的:
<template>
<div>
这是父组件。
<Child :showMe="showChild" @getValue="getValueFromChild">
Child>
<el-input v-model="showValueFromChild">el-input>
<el-button @click="showChildMethod">点击显示或隐藏childel-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>
通过上面的代码,父组件就可以获取子组件中
中的值了。
这个就比较简单了,也容易理解,关键就是如何定义一个全局变量:
//这是全局变量文件GlobalVal.vue中的代码,它是一个vue文件,只不过我们只关注script部分
<script>
let globalValOne;
export default{
globalValOne;
}
</script>
组件A对全局变量赋值:
<template>
<div>
这是A组件。
<el-input v-model="inputFromA">el-input>
<el-button @click="initGlobalVal">初始化全局变量GlobalOneel-button>
div>
template>
<script>
import GlobalVal from './GlobalVal.vue'
export default{
name: 'A',
data(){
return{
inputFromA: ''
}
},
methods:{
initGlobalVal(){
GlobalVal.globalValOne = this.inputFromA;
}
}
}
script>
组件B使用全局变量:
<template>
<div>
这是B组件。
<el-input v-model="inputOfB">el-input>
<el-button @click="getInputFromAByGlobalValOne">初始化全局变量GlobalOneel-button>
div>
template>
<script>
import GlobalVal from './GlobalVal.vue'
export default{
name: 'B',
data(){
return{
inputOfB: ''
}
},
methods:{
getInputFromAByGlobalValOne(){
this.inputOfB = GlobalVal.globalValOne;
}
}
}
script>
如上,即可实现通过全局变量来实现值传递。
上面的页面的具体现象为:
在A组件的input中输入任意内容,我们将这段内容记为IA,然后点击A组件中的按钮。
再进入B组件,点击B组件中的按钮,则B组件中的input中就会显示IA。