【vue】全局挂在参数方法

在 Vue.js 中，全局挂载参数、方法或组件可以帮助你在整个应用程序中访问特定的功能或数据，而无需在每个组件中单独导入或声明。不同版本的 Vue.js 有不同的全局挂载方式。

一、Vue 2.x 全局挂载
在 Vue 2.x 中，你可以通过修改 Vue.prototype 来全局挂载函数或属性。

全局方法

// main.js 或其他入口文件
Vue.prototype.$myMethod = function (arg) {
  console.log('This is a globally available method!', arg);
};

然后在任何组件内使用：

// Component.vue
export default {
  methods: {
    callGlobalMethod() {
      this.$myMethod('Hello World!');
    }
  }
}

全局组件

// main.js 或其他入口文件
Vue.component('global-component', {
  template: '<div>This is a globally registered component.</div>'
});

全局组件可以用import方式引入.vue文件，再main.js页面引入

// main.js 或其他入口文件
import globalComponent from "./globalComponent.vue"

Vue.component('global-component', globalComponent);

全局混入

// main.js 或其他入口文件
Vue.mixin({
  created() {
    console.log('Mixin created hook called.');
  }
});

二、Vue 3.x 全局挂载
Vue 3 引入了 Composition API 和新的全局 API，因此全局挂载的方式略有不同。

全局方法
在 Vue 3 中，你可以使用 app.config.globalProperties 来添加全局属性或方法。

import { createApp } from 'vue';

const app = createApp(App);

app.config.globalProperties.$myMethod = function (arg) {
  console.log('This is a globally available method!', arg);
};

app.mount('#app');

全局组件

import { createApp } from 'vue';
import GlobalComponent from './components/GlobalComponent.vue';

const app = createApp(App);

app.component('global-component', GlobalComponent);

app.mount('#app');

全局混入
Vue 3 不再支持全局混入，但你可以使用组合式 API 中的 setup() 函数来实现类似功能。

备注

• 全局挂载可能会导致命名冲突，特别是在大型项目中，所以要谨慎使用。
• 在 Vue 3 中，由于模板编译优化，通过 Vue.prototype 挂载的方法在 Vue 3 中不会被识别，应该使用 app.config.globalProperties。