上一篇我写了子组件通过事件向父组件发送数据,在这里我们就来聊聊同级组件之间数据通信的问题。同级组件之间的通信需要依赖一个vue实例作为中介者,(类似邮差)起到传递信息的作用。
我的代码依然沿用上面两篇的目录结构:
新建一个event.js文件,在里面新建一个vue实例,这个实例就承担起了组件之间通信的桥梁了,也就是中央事件总线。
加入代码 event.js:
import Vue from 'Vue'
const vm=new Vue()
export default vm;
然后新建两个同级组件zujian1.vue,zujian2.vue,引入event.js
在每个组件中定义好数据:
zujian1.vue:
<template>
<div class="zujian1">
<h2>同级组件1</h2>
</div>
</template>
<script>
import vm from "@/event.js";
export default {
name: "zujian1",
data() {
return {
data1: "组件一的数据"
};
}
};
</script>
<style>
.zujian1 {
color: blueviolet;
font-size: 30px;
border: 1px solid #bbb;
margin-bottom: