在Vue开发中，我们通常会使用单文件组件（.vue文件）来进行开发，将组件进行拆分，提高代码的可读性和可维护性。但是在多个单文件组件之间调用方法的时候，可能会出现一些问题。本文就来介绍一下多文件 Vue 之间调用方法的几种方式。
一、使用Mixin（混入）
Mixin是Vue提供的一种非常方便的方法，可以将一些公共的代码进行封装，在多个组件之间进行共享。我们可以将需要共享的方法写在一个Mixin中，并在需要使用这些方法的组件中引入这个Mixin。
比如我们有一个Mixin文件mixin.js，里面有一个showMsg方法：
export default {
methods: {
showMsg() {
console.log('hello world')
}
}
}我们只需要在要使用showMsg方法的组件中引入mixin.js就可以了。
import mixin from './mixin.js'
export default {
mixins: [mixin],
...
}在上面的代码中，我们使用mixins属性引入了mixin.js中的代码，并将其添加到组件中。
这样，在组件中就可以使用showMsg方法了。
this.showMsg()
二、使用this.$refs
我们在Vue中定义一个组件时，可以给它设置一个ref属性，可以在组件中引用这个组件实例。这个ref可以用来调用当前组件的方法。
比如我们有两个组件，组件A和组件B，组件A调用组件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>在组件A中的方法中使用this.$refs.b可以获取组件B的实例，从而使用组件B的方法。
三、使用vuex
Vuex是Vue官方提供的状态管理工具，在多个组件之间共享数据非常方便。除此之外，我们还可以在Vuex中定义一些公共的方法，供多个组件使用。
比如我们有一个store.js文件，在其中定义了一个公共的方法：
export default new Vuex.Store({
state: {...},
mutations: {...},
actions: {...},
getters: {...},
methods: {
showMsg() {
console.log('hello world')
}
}
})在需要使用这个公共方法的组件中，我们可以使用Vuex提供的mapActions方法将这个方法映射到组件中。
import { mapState, mapMutations, mapActions } from 'vuex'
computed: {
...mapState(['...']),
},
mutations: {
...mapMutations(['...']),
},
actions: {
...mapActions(['showMsg']),
}这样就可以在组件中使用showMsg方法了。
四、使用EventBus
我们可以使用Vue自带的EventBus来进行组件之间的通信，将需要共享的方法绑定到EventBus上，其他组件就可以使用这些方法了。
比如我们在main.js中创建一个EventBus：
import Vue from 'vue' export const EventBus = new Vue()
在需要使用共享方法的组件中，我们可以使用EventBus.$on方法监听一个事件，来获取调用共享方法的消息。
mounted(){
EventBus.$on('showMsg', ()=>{this.showMsg()})
},在共享方法的组件中，我们可以使用EventBus.$emit方法来触发showMsg事件。
EventBus.$emit('showMsg')总结
以上就是多文件Vue之间调用方法的几种方式。通过Mixin、this.$refs、Vuex以及EventBus，我们可以方便地实现在多个组件中共享方法的需求。在实际开发中，我们可以根据实际情况选择适合自己的方式来实现。
以上是多文件Vue之间调用方法的几种方式的详细内容。更多信息请关注PHP中文网其他相关文章！
