访问 Vue3 全局组件
Posted
技术标签:
【中文标题】访问 Vue3 全局组件【英文标题】:Access Vue3 global components 【发布时间】:2021-05-22 05:16:39 【问题描述】:所以我正在尝试将这个 Vue2 项目转换为 Vue3(typescript)。
它在全局注册组件并访问它们以匹配我商店中的值,但是当尝试在 Vue3 中实现这一点时,组件保持未定义。
import getComponentTypeForContent from "../api/getComponentTypeForContent";
import mapState from "vuex";
import defineComponent from "vue";
export default defineComponent(
name: "PageComponentSelector",
beforeCreate: function ()
console.log("CREATED PAGECOMPONENTSELECTOR");
,
computed: mapState(
model: (state) => state.epiDataModel.model,
modelLoaded: (state) => state.epiDataModel.modelLoaded,
),
methods:
getComponentTypeForPage(model)
// this.$options.components will contain all globally registered components from main.js
return getComponentTypeForContent(model, this.$options.components);
// this.$options.components fetches all components for vue2 app
,
,
);
并像这样注册组件:
//Pages
import LoginPage from "./components/pages/Login.vue";
const appAdv = createApp(App);
//Register components
appAdv.component("LoginPage", LoginPage);
appAdv.use(store).use(router).mount("#appAdv");
在 vue3 中找不到(或搜索不好)如何执行此操作或类似操作,所以我来到这里希望有人可以帮助嘿嘿
【问题讨论】:
这个例子对我来说很好。确切的错误是什么?你能链接到复制品吗? 【参考方案1】:我也经常在子组件中使用父组件,但没有(或没有)使用过 App.component 方法
在 vue3 中,我通常使用 provide/inject 。方法
提供
const app = createApp(App);
app.provide('someVarName', someVar); // `Provide` a variable to all components here
注入:
// In *any* component
const inject = Vue;
...
setup()
const someVar = inject('someVarName'); // injecting variable in setup
return someVar
【讨论】:
以上是关于访问 Vue3 全局组件的主要内容,如果未能解决你的问题,请参考以下文章