Vue如何引入公用方法

1. 在全局范围内引入

在你的main.js或main.ts文件中引入并注册你的公用方法，使得它们可以在整个Vue应用中使用。

	// 引入你的公用方法文件  import { myMethod } from './utils/myUtils';  // 将方法添加到Vue的原型上  Vue.prototype.$myMethod = myMethod;  // 然后你就可以在任何Vue组件中使用它了  // this.$myMethod();

注意：将方法添加到Vue.prototype上可能会导致在大型项目中难以追踪方法的来源。因此，这种方法在小型或中型项目中可能更为适用。

2. 在单文件组件中引入

如果你只需要在特定的组件中使用公用方法，你可以直接在组件的<script>标签中引入它。

	<script>  import { myMethod } from './utils/myUtils';  export default {  methods: {  // 你可以直接在methods中调用它  someMethod() {  myMethod();  }  }  }  </script>

3. 使用Vuex或Vue Composition API

对于Vuex，你可以将公用方法作为actions或mutations的一部分。

对于Vue Composition API，你可以使用setup函数和ref、reactive等API来创建响应式数据和方法。

4. 使用mixins

Vue的mixins是一种分发Vue组件中可复用功能的非常灵活的方式。一个mixin对象可以包含任何组件选项。当组件使用mixin对象时，所有mixin对象的选项将被“混合”进入该组件本身的选项。

	// 定义一个mixin  const myMixin = {  methods: {  myMethod() {  // ...  }  }  }  // 在组件中使用mixin  export default {  mixins: [myMixin],  // ...  }

5. 使用插件

如果你的公用方法非常通用，并且你想在多个项目中重复使用，你可以考虑将它们打包成Vue插件。Vue插件的范围没有严格的限制——具有一对公开方法install的函数就可以作为插件使用。

	// 插件文件  const MyPlugin = {  install(Vue, options) {  // 添加全局方法或属性  Vue.prototype.$myMethod = function (methodOptions) {  // ...  }  // 添加全局资源  Vue.directive('my-directive', {  bind (el, binding, vnode, oldVnode) {  // ...  }  // ...  })  // 注入组件选项  Vue.mixin({  created: function () {  // ...  }  // ...  })  // 添加实例方法  Vue.prototype.$myMethod = function (methodOptions) {  // ...  }  }  }  // 在main.js中使用插件  Vue.use(MyPlugin)