在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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/264173.html
標籤：其他
上一篇：Chrome 彩蛋