vue3引入全局方法

解决方案

在Vue 3项目中引入全局方法，可以让这些方法在项目的各个组件中使用，而无需每次都重新导入。通过Vue的插件机制或配置文件来实现全局方法的注册是常见的解决方案。下面将几种实现方式。

一、通过创建插件的方式

这是官方推荐的一种方式，创建一个插件文件，比如globalMethods.js：
```js
// globalMethods.js
import { h } from 'vue'

export default {
install(app) {
// 定义全局方法
app.config.globalProperties.$hello = function(name) {
console.log('Hello, ' + name);
return h('div', 'Hello, ' + name); // 可以返回VNode
}
}
}

然后在`main.js`中使用这个插件：
js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import GlobalMethods from './plugins/globalMethods' // 引入插件

const app = createApp(App)
app.use(GlobalMethods) // 使用插件
app.mount('#app')
``
现在，在任何组件中都可以直接使用this.$hello('World')`了（注意：如果是组合式API则需要单独处理）。

二、通过提供/注入功能

这种方式适合于父子组件之间的传递，但如果想全局使用也有办法。
1. 在main.js中定义要提供的内容：
```js
// main.js
import { createApp, provide, h } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 定义全局方法并提供
provide('globalMethod', {
sayHello(name) {
console.log('Hello, ' + name);
return h('div', 'Hello, ' + name);
}
})

app.mount('#app')

2. 然后在子组件中接收：
js
// ChildComponent.vue

export default {
setup() {
const globalMethod = inject('globalMethod');
return {
globalMethod
}
}
}

```

三、利用 Composition API 创建可复用逻辑

对于组合式API，可以创建一个单独的文件来封装全局方法，并导出：
```js
// useGlobalMethods.js
import { ref } from 'vue'

export function useGlobalMethods() {
const hello = (name) => {
console.log('Hello, ' + name);
return 'Hello, ' + name;
}

return {
hello
}
}

在组件中使用：
js
// MyComponent.vue

import { useGlobalMethods } from './useGlobalMethods'

export default {
setup() {
const { hello } = useGlobalMethods();
const message = hello('Vue');

return {
message
}
}
}

```
以上就是在Vue 3中引入全局方法的几种思路，可以根据实际需求选择合适的方式来实现。