Vue全局函数 - Vue.js

TypeScript模式全局函数实现

方案一(强烈推荐)：自定义全局函数库myfun.ts
第1步：在src目录下创建common公共目录，在common下创建一个存放全局函数的ts文件myfun.ts

class Myfun {
  public testMyFun () {
    console.log('调用公共方法')
  }
}
export default Myfun

第2步：在main.ts中，挂载公共函数库

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import MyFun from './common/myfun' //引入公共函数库
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
Vue.prototype.$myfun = new MyFun() //挂载公共函数库

第3步：在任意组件中使用this.$myfun.自定义函数名即可调用，例如本示例中，使用this.$myfun.testMyFun()即可

方案二：挂载Vue.prototype方式

如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 Vue.prototype上。

注册

main.js 中

Vue.prototype.$method = function () {}

一般建议函数名使用 $ 前缀。像 vue-router 的 $route 和 $router。

使用

那么组件代码里

export default {
  created () {
    this.$method()
  }
}

说明

挂载到 prototype 上是为了方便组件内直接用 this.$method 来使用，你也可以直接用 Vue.method，这样同样可以全局使用，不过在组件内就需要再 import 一次 Vue 了。

方案三：组件混入方式实现
第1步：创建一个存放全局函数的组件MyFun.vue

<script>
export default {
  name: 'MyFun',
  methods: {
    mytest () {
      console.log('哈哈哈哈')
    }
  }
}
</script>

第2步：在main.ts中将组件MyFun.vue混入

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import MyFun from './components/MyFun.vue'  //引入公共函数组件
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
Vue.mixin(MyFun) //公共函数组件混入

第3步：在组件中直接使用this.mytest()即可调用全局函数