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,
C Review of basic language knowledge Go Language learning notes (GUI programming )Java Misunderstanding —— Method overloading is a manifestation of polymorphism ? How to achieve low cost and high stability for cloud native applications ?elementui Shuttle box el-transfer Display list content text too long C/C++ Memory model Element-Ui assembly Message Message prompt , alert Popup C# Making a simplified version of calculator Python In pycharm editor Interface style modification Tiktok refresh progress bar ( Two little balls turn ), The code is simple