浅谈vue组件通信

分类:vue

概述

组件系统是 vue 的一个重要的功能,由于各个组件分布在不同的文件中,因此如何进行组件之间的通信也成为了我们必须掌握的技能。

父子组件通信

父子组件通信需要用到 props$emit

父组件 -> 子组件

父组件向子组件通信可以使用props来传递变量,具体代码实现如下:

父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input v-model="data" type="text" />
<child :name="data"></child>

import child from "./child"; //引入组件
export default {
data() {
return {
data: null
};
},
components: {
child //注册组件
}
};
子组件
1
2
3
4
5
6
<p></p>
<p v-text="name"></p>; //

export default {
props: ["name"] //通信变量
};

子组件 -> 父组件

子组件向父组件通信可以使用$emit来传递变量,具体代码实现如下:

父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<child @getChildData="getData"></child>
<p v-text="child"></p>

import child from "./child";
export default {
data() {
return {
child: null
};
},
components: {
child
},
methods: {
getData(data) {
this.child = data;
}
}
};
子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input v-model="child" @input="setData" type="text" />

export default {
data() {
return {
child: null
};
},
methods: {
setData() {
this.$emit("getChildData", this.child);
}
}
};

同级组件通信

同级组件不能像父子组件那样直接传值,需要一个中间桥梁。我们需要先新建一个公共文件eventBus.js,然后添加两句代码:

1
2
import Vue from "vue";
export default new Vue();

然后在同级组件中引入eventBus.js文件

这里我们演示从 page1page2 通信:

page1.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input @input="changeVal" v-model="inputData" type="text">

import bus from "../assets/eventBus";
export default {
data() {
return {
inputData: null
};
},
methods: {
changeVal() {
bus.$emit("newBusVal", this.inputData);
}
}
};
page2.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p></p>
<p v-text="msg"></p>;

import bus from "../assets/eventBus";
export default {
data() {
return {
msg: "我是page2的值"
};
},
created() {
bus.$on("newBusVal", data => {
this.msg = data;
});
}
};

通过$emit$on触发和监听事件,就可以进行通信了。