Vue中兄弟组件之间的通信

时间:2021-2-27 作者:admin

在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>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。