vue3怎么使用全局的方法

在Vue 3中使用全局方法可以通过创建一个插件、使用mixin或者直接挂载到全局对象上等几种方式来实现，这些方法能让组件之间共享功能代码，方便维护和复用。

一、创建插件

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

export default {
install(app) {
// 定义全局方法
app.config.globalProperties.$myMethod = function() {
console.log('这是一个全局方法');
return h('div', { class: 'custom-class' }, '来自全局方法的内容');
}
}
}

然后在`main.js`（项目的入口文件）中引入并使用这个插件：
javascript
import { createApp } from 'vue'
import App from './App.vue'
import GlobalMethods from './plugins/globalMethods' // 假设插件放在plugins文件夹下

const app = createApp(App)
app.use(GlobalMethods)
app.mount('#app')

这样，在任何组件里就可以通过`this.$myMethod()`调用该全局方法了。例如：
vue

export default {
methods: {
callGlobalMethod() {
this.$myMethod();
}
}
}

```

二、使用mixin

虽然 Vue 3 中不建议过度使用mixin，但在某些情况下它仍然有用。创建一个全局mixin文件globalMixin.js：
javascript
// globalMixin.js
export default {
methods: {
$anotherGlobalMethod() {
console.log('这是通过mixin定义的全局方法');
}
}
}

同样在main.js中应用：
```javascript
import globalMixin from './mixins/globalMixin'

const app = createApp(App)
app.mixin(globalMixin)
app.mount('#app')
``
之后所有组件都可以使用this.$anotherGlobalMethod()`。

三、直接挂载到全局对象

这种方式简单粗暴，但不太推荐，因为它可能会污染全局命名空间。不过为了完整性还是介绍一下。可以在main.js里直接添加：
javascript
window.$yetAnotherGlobalMethod = function() {
console.log('这是直接挂在window上的全局方法');
}

在组件中直接调用$yetAnotherGlobalMethod()即可。但是要注意避免与其他库或框架发生冲突，并且不利于模块化开发。创建插件是实践，既保持了代码的整洁又实现了功能需求。