Last time we talked about the value transfer of parent-child components , Let's talk about it this time Vue of use eventBus Realize the value transfer of sibling components . A sibling component usually has multiple child components under the parent component , Subcomponents pass values to each other
. I wrote one here Todo List example , stay menu Below todoList After the component clicks the completion item, it is passed to finishList assembly .

<>1. establish eventBus.js

eventBus As a central event bus , For monitoring todoList Events thrown , And set out finishList Receive events for .
import Vue from 'vue' export default new Vue()
<>2. Reference in sibling component eventBus, And join in $emit and on method

TodoList: stay methods of use $emit Send delivery value .
// This is todoList assembly <script> import eventBus from '@/eventBus' export default {
name: "TodoList", data () { return { todoList: [] } }, methods : { // Pass the completion event to the completion list
handleFinish: function(index) { const eventFinished = this.todoList.splice(
index, 1)[0] eventBus.$emit('finishEvent', eventFinished) } }, } </script>
FinishList: stay created of use $on Receive delivery value .
// This is finishList assembly <script> import eventBus from '@/eventBus' export default {
name: "FinishList", data () { return { finishList: [] } }, created() {
// Add the passed completion event eventBus.$on('finishEvent', eventFinished => { this.finishList.push
(eventFinished) }) } } </script>

Technology
©2019-2020 Toolsou All rights reserved,
How to prevent Mac put to sleep ? Tell you 4 This is an effective way be based on C# Students' grades / mis solve element-ui The drop-down box of has a value but cannot be selected Student information management system source code -C language VR,AR and MR The difference between these technologies 【 Data structure and algorithm 6】 Stack implementation of comprehensive calculator utilize python Yes monkey Automatic log analysis Laya Wechat games sub package loading Alibaba enterprise email smtp set up ( practice )【Java Details of knowledge points 3】 Serializable and Deserialize