在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>