访问 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 全局组件的主要内容,如果未能解决你的问题,请参考以下文章

2022-03-03 vue3中使用全局变量

vue3注册全局组件在vscode中没有智能提示问题

批量自动化注册全局组件(Vue3)

vue3全局注册组件

Vue3.js 全局组价案例入门

VUE3@clli组件样式全局组件配置打包