Simple use of Vue bus

Simple use of Vue bus

Scenario description:

Component A includes components B and C, and component B includes component D. What if component D wants to trigger the method of component C in component A?

Of course there are solutions, you can use vuex to manage the state, or you can use $emit to pass it, but I want to try the bus method;

as follows:

The emit of the bus is triggered in the D component, and then the on of the bus is used to trigger the method in the A component;

In component D

dataLoad(){
   console.log('Loading complete trigger event');
   this.$bus.$emit('itemDataLoad') 
   // this.$bus.$emit('event name', parameter) // The second one can be a parameter},

In component A

 mounted() {
    // Listen for data loading in item this.$bus.$on('itemDataLoad', () => {
      console.log('Data loading completed');
    })
    // this.$bus.$on('event name', callback function (parameters))
  },

Of course, in component A, events in component C can be triggered by this.$refs , etc.

Another step is that $bus does not exist by default. Try printing this.$bus為undefined .

Don't worry, add $bus in main.js;

// bus bus vue instance Vue.prototype.$bus = new Vue()

Of course, the bus can be removed during the life cycle;

this.$bus.$off();

Record encapsulated anti-shake function

// debounce function: function (fun, delay) {
    let timer = null
    // Receive the value of the parameter passed in when calling the function... args can be multiple return function (...args) {
      if (tiemr) return
      timer = setTimeout(() => {
        fun.apply(this, args)
      }, delay);
    }
  }

const refresh = debounce(xxx, 500)

refresh('parameter 1', 'parameter 2', 'parameter 3')

This is the end of this article about the simple use of Vue's bus. For more relevant content about the simple use of Vue's bus, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!