Home > Web Front-end > Front-end Q&A > Methods between vue components call each other

Methods between vue components call each other

WBOY
Release: 2023-05-11 09:14:06
Original
5351 people have browsed it

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';
  }
}
Copy after login

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
  },...

}
Copy after login

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();
Copy after login

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;
Copy after login

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

this.$store.dispatch('changeMsg');
Copy after login

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()
Copy after login

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

 this.$bus.$emit('EVENT_NAME', data)
Copy after login

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

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template