访问Vue3全局组件

Question

所以我正在尝试将这个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中做这件事或类似的事情，所以我来到这里，希望有人能帮助我

Answer 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}
}