Several ways to call methods between multiple files Vue

In Vue development, we usually use single-file components (.vue files) for development and split the components to improve the readability and maintainability of the code. But when calling methods between multiple single-file components, some problems may arise. This article will introduce several ways to call methods between multiple files in Vue.

1. Use Mixin (Mixin)

Mixin is a very convenient method provided by Vue, which can encapsulate some common code and share it between multiple components. We can write the methods that need to be shared in a Mixin and introduce this Mixin into the components that need to use these methods.

For example, we have a Mixin file mixin.js, which contains a showMsg method:

export default {
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
}

We only need to introduce mixin.js into the component that uses the showMsg method.

import mixin from './mixin.js'

export default {
  mixins: [mixin],
  ...
}

In the above code, we use the mixins attribute to introduce the code in mixin.js and add it to the component.

In this way, you can use the showMsg method in the component.

this.showMsg()

2. Use this.$refs

When we define a component in Vue, we can set a ref attribute to it, and we can reference this component instance in the component. This ref can be used to call methods of the current component.

For example, we have two components, component A and component B. Component A calls the method in component B. This can be achieved through the following steps:

1. Set the ref attribute in component B

<template>
  <div>
    组件B
  </div>
</template>

<script>
export default {
  methods: {
    methodOfB() {
      console.log('methodOfB')
    }
  }
}
</script>

<template>
  <div>
    <component-b ref="b"></component-b>
  </div>
</template>

<script>
import ComponentB from './ComponentB.vue'

export default {
  components: {ComponentB},
  methods: {
    methodOfA(){
      this.$refs.b.methodOfB()
    }
  }
}
</script>

Use this.$refs.b in the method in component A to get the instance of component B, thereby using the method of component B.

3. Use vuex

Vuex is a state management tool officially provided by Vue. It is very convenient to share data between multiple components. In addition, we can also define some public methods in Vuex for use by multiple components.

For example, we have a store.js file in which a public method is defined:

export default new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...},
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
})

In the component that needs to use this public method, we can use the mapActions method provided by Vuex to This method is mapped to the component.

import { mapState, mapMutations, mapActions } from 'vuex'

computed: {
  ...mapState(['...']),
},
mutations: {
  ...mapMutations(['...']),
},
actions: {
  ...mapActions(['showMsg']),
}

This way you can use the showMsg method in the component.

4. Using EventBus

We can use Vue’s own EventBus to communicate between components, bind the methods that need to be shared to EventBus, and other components can use these methods. .

For example, we create an EventBus in main.js:

import Vue from 'vue'

export const EventBus = new Vue()

In components that need to use shared methods, we can use the EventBus.$on method to listen to an event to get the shared method to be called news.

mounted(){
  EventBus.$on('showMsg', ()=>{this.showMsg()})
},

In components with shared methods, we can use the EventBus.$emit method to trigger the showMsg event.

EventBus.$emit('showMsg')

Summary

The above are several ways to call methods between multiple files Vue. Through Mixin, this.$refs, Vuex and EventBus, we can easily realize the need to share methods in multiple components. In actual development, we can choose a method that suits us according to the actual situation.

The above is the detailed content of Several ways to call methods between multiple files Vue. For more information, please follow other related articles on the PHP Chinese website!