Vue3 글로벌 컴포넌트 액세스

Vue3 글로벌 컴포넌트 액세스

그래서 이 Vue2 프로젝트를 Vue3(타입 스크립트)로 변환하려고 합니다.

글로벌하게 컴포넌트를 등록하여 스토어의 값과 일치시키기 위해 액세스하지만 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에서 이 작업 방법 또는 이와 유사한 작업을 할 수 없기 때문에 누군가 도와주기를 바라고 왔습니다.

또한 하위 컴포넌트에서 상위 컴포넌트를 자주 사용하지만 App.component 메서드를 사용하지 않았거나 사용하지 않았습니다.

vue3에서는 보통 provid/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}
}

언급URL : https://stackoverflow.com/questions/66273763/access-vue3-global-components