1. Create a file to create a separate instance of the shared data bound to the VUE bus in the sibling

import Vue from 'vue'
// Define a bus, event bus, Used when sibling components share data
var bus=new Vue()
/ / export
export default bus;
Copy the code

Com_1 and com_2 files are created to pass the contents to each other

Receive and pass values by introducing bus files (self-booting this method is similar to transmission from child to parent)

3. Basic steps

3.1. Introduce the bus

import bus from ".. /modules/bus.js";
Copy the code

3.2 launch

Set the @click event to send in the file

<button @click="sendToCom2"</button id >Copy the code

Handle click events through the component’s methods: events method

methods:{
    sendToCom2(){
		bus.$emit('receivecom1'.this.comData)
    }
}
//'receivecom1' a name for sending data
//this.comData Data passed
Copy the code

Storage name receivecom1 Storage value is the value of the transmitted data in the file

3.3 the receiving

Through credTED in the lifecycle (HTML has not been rendered after instance creation)

// Used in the life cycle
created() {
    bus.$on("receivecom1".this.handler);
  },
// Receivecom1 Receives content worthy of name
// Place the accepted content value in a function method this.handler
// Assignment via methods implemented in methods
handler2(d) {
      this.receiveCom2Data = d;
},
// Assign the obtained value to the component's value content via the method
Copy the code