多文件Vue之间调用方法的几种方式

在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中的方法，可以通过以下步骤实现：

1. 在组件B中设置ref属性

在组件A中的方法中使用this.$refs.b可以获取组件B的实例，从而使用组件B的方法。

三、使用vuex

带缩略图和多种过渡动画的jquery焦点图特效

这是一款基于jssor.slider.js的炫酷jquery焦点图特效。该焦点图特效在底部带有缩略图，并且它在切换过渡是带有多种动画效果。该焦点图特效兼容ie8浏览器。 使用方法 在页面中引入样式文件jquery.min.js和jssor.slider.mini.js文件。

下载

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，我们可以方便地实现在多个组件中共享方法的需求。在实际开发中，我们可以根据实际情况选择适合自己的方式来实现。