vue3 全局方法

// 在 Vue 3 中，可以通过创建一个插件来定义全局方法。以下是一个示例代码：

// 创建一个插件文件 globalMethods.js
import { h } from 'vue';

export default {
  install: (app) => {
    // 定义全局方法
    app.config.globalProperties.$hello = (name) => {
      console.log(`Hello, ${name}!`);
    };

    // 如果需要在模板中使用，还需要定义一个指令或组件
    app.component('global-hello', {
      props: ['name'],
      render() {
        return h('div', `Hello, ${this.name}!`);
      }
    });
  }
};

// 在 main.js 中使用插件
import { createApp } from 'vue';
import App from './App.vue';
import GlobalMethods from './globalMethods';

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

// 现在可以在任何组件中使用 $hello 方法
// 例如，在某个组件的 setup 函数中：
setup() {
  const sayHello = () => {
    this.$hello('Vue 3 User');
  };
  return { sayHello };
}

解释说明：

1. 创建插件：我们创建了一个名为 globalMethods.js 的插件文件，其中定义了一个全局方法 $hello。
2. 安装插件：在 main.js 中通过 app.use(GlobalMethods) 安装插件。
3. 使用全局方法：在任何组件中都可以通过 this.$hello('name') 调用该全局方法。
4. 组件注册：为了在模板中使用，还定义了一个全局组件 global-hello，可以在模板中直接使用 <global-hello name="Vue 3 User" />。

这样就可以在 Vue 3 应用中轻松地添加和使用全局方法了。