vue3.x如何注册全局组件/方法（替代vue2.x的Vue.prototype）-阿里云开发者社区

vue3.x如何注册全局组件/方法（替代vue2.x的Vue.prototype）

2022-11-11 1571

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue3.x如何注册全局组件/方法（替代vue2.x的Vue.prototype）

vue3.x是无法通过Vue.prototype来注册全局组件/方法的，因此需要另辟蹊径。

vue3.x注册全局组件/方法主要有以下两个方式：

provide / inject （推荐）

main.js中：通过provide将组件或者方法、变量挂载在全局

import { createApp } from'vue';
importAppfrom'./App.vue';
importrouterfrom'./router';
importstorefrom'./store';
constapp=createApp(App);
app.use(store);
app.use(router);
// 挂载全局方法constglobalFunc= () => {
console.log('要挂载在全局的方法');
}
// 将globalFunc方法挂载在全局app.provide('globalFunc', globalFunc);
app.mount('#app');
// 把vue实例挂载在window.vm,方便使用vue的实例window.vm=app;

组件中：通过inject获取全局方法并调用

<template><div>组件中通过inject获取全局方法并调用</div></template><scriptlang="ts">import { defineComponent, onMounted, inject } from'vue';
exportdefaultdefineComponent({
name: 'JobDetail',
// 注册组件components: {
Header,
  },
setup() {
onMounted(() => {
testFunc();
    });
consttestFunc= (): void=> {
constglobalFunc: any=inject('globalFunc'); // 通过inject获取挂载在全局的globalFunc方法globalFunc();
    };
return {
testFunc,
    };
  },
});
</script>

app.config.globalProperties（不推荐）

main.js中：通过app.config.globalProperties将组件或者方法、变量挂载在全局

import { createApp } from'vue';
importAppfrom'./App.vue';
importrouterfrom'./router';
importstorefrom'./store';
constapp=createApp(App);
app.use(store);
app.use(router);
// 挂载全局方法constglobalFunc= () => {
console.log('要挂载在全局的方法');
}
// 将globalFunc方法挂载在全局app.config.globalProperties.globalFunc=globalFunc;
app.mount('#app');
// 把vue实例挂载在window.vm,方便使用vue的实例window.vm=app;

组件中：通过getCurrentInstance().appContext.config.globalProperties获取全局方法并调用

<template><div>组件中通过inject获取全局方法并调用</div></template><scriptlang="ts">import { defineComponent, onMounted, getCurrentInstance } from'vue';
exportdefaultdefineComponent({
name: 'JobDetail',
// 注册组件components: {
Header,
  },
setup() {
onMounted(() => {
testFunc();
    });
consttestFunc= (): void=> {
constinternalInstance: any=getCurrentInstance();
console.log(internalInstance.appContext.config.globalProperties);
// 通过getCurrentInstance().appContext.config.globalProperties获取全局方法并调用internalInstance.appContext.config.globalProperties.globalFunc();
    };
return {
testFunc,
    };
  },
});
</script>