vue3 模板 调用全局方法
在Vue 3项目中，当需要在模板中调用全局方法时，可以通过多种方式实现。以下是两种主要的解决方案：一是使用插件注册全局方法；二是通过mixin混入全局方法。
一、使用插件注册全局方法
这是比较推荐的做法，可以确保全局方法被正确地注入到所有的组件实例中，并且保持良好的代码组织结构。
- 创建插件文件
在src/plugins目录下创建一个名为globalMethods.js的文件：
javascript // src/plugins/globalMethods.js import { h } from 'vue'</p> <p>export default { install(app) { // 定义全局方法 app.config.globalProperties.$myGlobalMethod = function (msg) { console.log(<code>Global Method Called: ${msg}) return h('div',Hello, ${msg}) }// 可选：添加类型声明以获得更好的IDE支持 if (!app.config.globalProperties.$myGlobalMethod) { app.config.globalProperties.$myGlobalMethod = () => {} } }}
- 在main.js中引入并使用插件
接下来，在项目的入口文件
main.js中引入并使用这个插件：javascript // main.js import { createApp } from 'vue' import App from './App.vue' import globalMethods from './plugins/globalMethods'</p> <p>const app = createApp(App)</p> <p>// 使用插件 app.use(globalMethods)</p> <p>app.mount('#app')
- 在组件模板中调用全局方法
现在可以在任何组件的模板中直接调用
$myGlobalMethod了：html <div> <!-- 直接调用全局方法 --> <button>Click Me</button> </div> </p> function showMessage() { this.$myGlobalMethod('Hello') } <p>需要注意的是，在组合式API（Composition API）中，
this指向的是undefined，因此不能像选项式API那样直接通过this访问全局属性。如果要在组合式API中使用全局方法，建议将其挂载到全局配置对象上或者通过其他方式传递。
二、通过mixin混入全局方法
虽然官方已经不推荐使用mixins，但在某些场景下它仍然是一个可行的选择。
- 定义全局mixin
在
src/mixins目录下创建一个名为globalMixin.js的文件：
javascript
// src/mixins/globalMixin.js
export default {
methods: {
$myGlobalMethod(msg) {
console.log(`Global Method Called via Mixin: ${msg}`)
}
}
}
- 在main.js中应用mixin
同样是在
main.js中进行设置：javascript // main.js import { createApp } from 'vue' import App from './App.vue' import globalMixin from './mixins/globalMixin'</p> <p>const app = createApp(App)</p> <p>// 应用mixin app.mixin(globalMixin)</p> <p>app.mount('#app')
- 在组件中使用
此时所有组件都可以直接使用
$myGlobalMethod作为实例方法了：html <div> <button>Click Me</button> </div> </p> function showMessage() { $myGlobalMethod('Hello') } <p>推荐使用插件的方式注册全局方法，因为这种方式更加符合Vue的设计理念，也更容易维护和管理。而mixin则逐渐被淘汰，除非有特殊需求否则不建议采用。
