“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Global event bus

When we write components, we all know that the parent passes to the child and we all know that the child passes to the parent but how do we communicate when we have complex nested components? Some people would say that vuEX is the solution, but let's talk about global event bus which is a way of communicating between components, for any component.Copy the code

Scene description

The A-test component passes data to the B-test. We need to use the global event bus. $emit(' event name ', data) provides data via this.$bus.$on(' event name ',(data)=>{}) accepts data by destroying the corresponding event in the component of the receiving party.  this.$bus.$off('hello') },Copy the code

Global event bus step 1: inject in main.js

Extend ({}) is vueComponent. Let demo = vuue. Extend ({}) // d is vueComponent instance object = new Demo(); Vue.prototype.x=d we need to have a copy or puppet to store [notification]. We'll put it on vueComponentCopy the code

Step 2: a-test Send data

<template> <div class="flexflex"> <el-button @click="gievHander"> </el-button> </template> <script> export default { methods:{ gievHander(){ this.x.$emit('hello',666) } }, } </script>Copy the code

Step 3: The B-test component accepts the data

{{getDaoData}}</div> </div> </template> <script> Export default {data(){return {getDaoData:''}}, mounted(){this.x.$on('hello',(data)=>{ Console. log(' listen to event data ',data) this.getDaoData=data})},} </script>Copy the code

Optimize the first step

Even though I could write it this way. But it's not neat enough. New Vue({router, render: (h) => h(App), <! BeforeCreate () {// This in the lifecycle points to a vUE instance // install the global event bus; $bus prototype. X =this}}).$mount("#app");Copy the code

Step 3: Continuous optimization

When this component is destroyed, <template> <div class="btest"> <h2> I am the b-test component </h2> <div> < {getDaoData}}</div> </div> <script> export default {data(){return {getDaoData:''}}, mounted(){this.x.$on('hello',(data)=>{// hello => Console. log(' Listen to event data ',data) this.getdaodata =data})}, beforeDestroy() {// When component is destroyed, $off('hello') // Note that this.x.$off() destroys all events in the event bus},} </script>Copy the code

Message subscription and publishing

Some students may ask, is there another way to use the one just provided? They do, but they rely on third-party libraries! CNPM I pubsub-js needs to be installed. Subscribe (msgName,data)=>{}) Destroy: pubsub.unsubscribe('xx')Copy the code

A-test Sends data

<template> <div class="flexflex"> <el-button @click="gievHander"> </el-button> </template> <script> import pubsub from 'pubsub-js' export default { methods:{ gievHander(){ Publish ('dingyueming')}},} </script>Copy the code

B-test Accepts data

<template> <div class="btest"> <h2> I am a b-test component </h2> <div> </template> <script> import pubsub from 'pubsub-js' export default { data(){ return { getDaoData:'', pubId:'' } }, Mounted (){this.pubid =pubsub.subscribe('dingyueming',(msgName,data)=>{this.pubid =pubsub.subscribe('dingyueming',(msgName,data)= This.getdaodata =data})}, // unsubscribe beforeDestroy() {pubsub.unsubscribe(this.pubid)},} </script>Copy the code