Methods between vue components call each other

In Vue component-based development, components can be nested into each other, and components with different structures often need to call each other's methods. That is to say, you need to implement a method inside a component to call a method in another component. Next, let’s introduce how the methods between Vue components call each other.

1. Through parent components

In Vue component-based development, each component has its own parent component, and components can call each other. We can define methods in the parent component and then call the method in the parent component through $parent in the child component.

First define a method in the parent component:

methods:{
  changeMsg:function(){
     this.msg='hello world';
  }
}

Then use this.$parent.changeMsg() in the child component to call the method in the parent component.

2. Reference through components

In the component-based development of Vue, sub-components can introduce other components through import, and directly call the method of introducing components in the sub-component.

Suppose we want to call the method of component B in component A. First, component B must be introduced into component A, as shown below:

import B from '../B.vue'
export default {
  components: {
    B
  },...

}

Then it can be used directly in component A. this.$refs to get the B component instance, and then call the method in the B component.

this.$refs.b.test();

3. Through Vuex

Vuex is a state management library in Vue that can easily manage the global state. We can define a global method in Vuex and call the global Vuex method through $store.dispatch in the component.

First we need to define a method in Vuex:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    msg:'hello',
  },
  mutations: {
    changeMsg(state){
      state.msg='hello world';
    }
  },
  actions:{
    changeMsg({commit}){
      commit('changeMsg');
    }
  }
})

export default store;

Then use the following code in the component to call the method in Vuex:

this.$store.dispatch('changeMsg');

4. Through the event bus

In Vue, we can achieve communication between components through the event bus. This approach distributes events to various parts of the application and allows us to pass data between components.

We can create an empty Vue instance as an event bus, and then call the event bus in the component to trigger the event.

First create a Vue instance in main.js as the event bus:

Vue.prototype.$bus = new Vue()

Then in the component you can use the following code to trigger the event:

 this.$bus.$emit('EVENT_NAME', data)

Finally in another The following code can be used in the component to receive events:

this.$bus.$on('EVENT_NAME', data => {
    // handle event
})

Through the above four methods, we can implement methods between Vue components to call each other. In actual applications, we can choose the method that best suits our needs to implement method calls between components.

The above is the detailed content of Methods between vue components call each other. For more information, please follow other related articles on the PHP Chinese website!