Vue中兄弟组件之间的通信

在vue前端开发的时候，一个组件可能是由多个子组件组成，而他们是在不同的文件里面里面书写的，当一个子组件发生改变时，怎么将改变的数据传递给另外一个组件呢。本人了解到了一种方法，这里记录学习一下。

类似于下面的界面，整个主界面是有两个组件左边和右边，当我们点击左边的不同选项右边的界面会显示不同界面。

main.js

实例化一个新的vue

export const eventBus = new Vue()

sideBar.vue

左边侧边栏界面，引入之前实例化的eventBus，绑定事件

<template>
  <div class="sideBar">
    <el-col :span="20">
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
        <el-menu-item index="1" @click="messageContent('1')">
          <i class="el-icon-menu"></i>
          <span slot="title">博客管理</span>
        </el-menu-item>
        <el-menu-item index="2" @click="messageContent('2')">
          <i class="el-icon-menu"></i>
          <span slot="title">评论管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
</template>


<script>
import {eventBus} from '@/main'

export default {
  name: "sideBar",
  methods: {
    messageContent(index) {
      eventBus.$emit('changeSide', index);
    },
  }
}
</script>

Managecontent.vue

<template>
  <div class="manageContent">
    <ArticlesManage v-if="msg === '1'"></ArticlesManage>
    <comment-manage v-else-if="msg === '2'"></comment-manage>
  </div>
</template>
<script>
import {eventBus} from '@/main'

export default {
  name: "ManageContent",
  components: {
    AlgorithmManage,
    CommentManage
  },
  created() {
    eventBus.$on('changeSide', (message) => {
      this.msg = message
    })
    console.log(this.msg);
  },
}
</script>