vue3 定义全局公共方法

在Vue3项目中，定义全局公共方法可以让组件之间共享功能逻辑，避免重复代码。解决方案是通过创建插件或利用全局配置等方式将方法注册到Vue实例上，从而使得所有组件都能调用这些公共方法。

使用 Vue 插件定义全局方法

这是推荐的方式之一。在src目录下创建一个plugins文件夹，并新建globalMethod.js文件：

javascript
// src/plugins/globalMethod.js
import { h } from 'vue'</p>

<p>export default {
  install(app) {
    // 定义公共方法
    app.config.globalProperties.$hello = function(name) {
      console.log('Hello, ' + name)
      return h('div', {}, <code>Hello, ${name})
    }
  }
}

然后在main.js中引入并使用这个插件：

javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import globalMethod from './plugins/globalMethod'</p>

<p>const app = createApp(App)
app.use(globalMethod)
app.mount('#app')

现在可以在任何组件里直接调用this.$hello('world')来使用这个全局方法了。

通过mixin实现

mixin（混入）也是定义全局方法的一种方式，不过这种方式在Vue3中不被推荐作为全局方法的主要手段，但对于某些场景仍然适用：

javascript
// src/mixins/globalMixin.js
export default {
  methods: {
    sayHi() {
      console.log('Hi!')
    }
  }
}</p>

<p>// main.js
import { createApp } from 'vue'
import App from './App.vue'
import globalMixin from './mixins/globalMixin'</p>

<p>const app = createApp(App)
app.mixin(globalMixin)
app.mount('#app')

需要注意的是，mixin可能会引起命名冲突，并且不利于维护和调试。

组合式API中的全局方法

对于组合式API，我们可以创建一个单独的函数文件，然后在需要的地方导入它：

``javascript
// src/utils/globalFunction.js
export function greet(name) {
console.log(你好, ${name}`)
}

// 在组件中使用

import { greet } from '@/utils/globalFunction'

greet('Vue3')

```

这种方式更加直观，也更符合Vue3推崇的组合式API风格。它不会污染全局作用域，有利于模块化开发和测试。

以上就是几种在Vue3中定义全局公共方法的方式，开发者可以根据实际需求选择最适合的方法。

(www.nzw6.com)