vue3 注册全局方法

在Vue3中注册全局方法，可以通过创建一个插件或者直接在createApp实例上扩展原型的方法来实现。这两种方式都能让自定义的全局方法在所有的组件中使用，下面将这两种解决方案。

通过创建插件注册全局方法

创建一个名为myPlugin.js的文件，在这个文件里定义并导出一个函数作为插件，该函数接收app作为参数（app是调用createApp()后的实例）。在这个函数体内，可以使用app.config.globalProperties来添加全局属性或方法。

javascript
// myPlugin.js
export default {
install(app) {
// 添加全局方法或属性
app.config.globalProperties.$myGlobalMethod = function() {
console.log('This is a global method');
}
}
}


然后在主文件（如main.js）中引入并使用这个插件：

javascript
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './myPlugin';</p>

<p>const app = createApp(App);
app.use(MyPlugin);  // 使用插件
app.mount('#app');

这样，在任何组件中就可以通过this.$myGlobalMethod()来调用这个全局方法了。

直接在应用实例上注册全局方法

如果你不想创建一个单独的插件文件，也可以选择直接在创建应用实例时扩展全局方法。

javascript
import { createApp } from 'vue';
import App from './App.vue';</p>

<p>const app = createApp(App);</p>

<p>// 直接在app实例上设置全局方法
app.config.globalProperties.$anotherGlobalMethod = function() {
  console.log('Another global method called');
};</p>

<p>app.mount('#app');

这种方式更加简洁，适合只有一两个全局方法需要注册的情况。不过需要注意的是，当项目变得复杂时，还是建议采用插件的形式来组织代码，以便更好地维护和管理。

无论是哪种方式，一旦完成了上述配置后，在组件内部就可以像下面这样使用这些全局方法了：

javascript
export default {
name: 'SomeComponent',
methods: {
callGlobalMethod() {
this.$myGlobalMethod(); // 如果是通过插件注册的
this.$anotherGlobalMethod(); // 如果是直接在app实例上注册的
}
}
};


在Vue3中还可以利用组合式API（Composition API），结合provide/inject机制来共享数据和方法，但这已经超出了“全局方法”的范畴，适用于更复杂的场景需求。