Vue brothers do not need a parent component when passing values, okay? Just two sibling components.

vue brothers do not need a parent component to pass values, okay? Just two sibling components

first I created a new js file eventBus.js
and wrote

in it.
import Vue from "Vue"
export default new Vue;

one components

     <div class="a1">
        <button @click="start"></button>
    </div>

     import bus from "../assets/eventBus";
     
    data(){
        return{
            acc:"2"
        }
    },
   start(){
            const a1=this.mydata;
            let a2=this.acc;
            bus.$emit("userDefinedEvent",[a1,a2]);
        }

two components

    <div class="a1">
        <span>:<br/>{{aaaaaaaaaaaaaaaaa}}</span>
    </div>

    import bus from "../assets/eventBus";

     return{
            aaaaaaaaaaaaaaaaa:""
        }

    mounted(){
        const _this=this;
        bus.$on("userDefinedEvent",function(msg){
            _this.aaaaaaaaaaaaaaaaa=msg;
        })
    },

in the three parent component

  <div class="home">
        <one></one>
        <two></two>
   </div>
   
import one from "@/components/one";
import two from "@/components/two";

 components:{
        one,
        two
    }

clipboard.png

clipboard.png

this enables the communication between the two sibling components, but I don"t want the parent component now. It"s just the data exchange between the two components. How can I do that?
because it"s all imported in the parent component, I don"t need to import it in the parent component now, it"s just a communication between the two sibling components, how can I implement it?

Mar.02,2021

use a middleware, either vuex, or a vue instance, one listener, one trigger


No parent components, components must have a place to put ah? So it's a routing component, but I don't really understand what you mean.

< hr >

one of the main problems with traditional eventBus is that two components must exist at the same time (or when events are triggered and received at the same time). If you don't want to go to vuex, you can refer to this: vue data transfer-- I have special implementation skills

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b9ff0c-2f4aa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b9ff0c-2f4aa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?