gpt4 book ai didi

vue.js - 访问 Vue3 全局组件

转载 作者:行者123 更新时间:2023-12-05 06:51:04 28 4
gpt4 key购买 nike

所以我正在尝试将这个 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 中执行此操作或类似操作,所以我来这里希望有人能提供帮助呵呵

最佳答案

我也经常在子组件中使用父组件,但没有(或没有)使用 App.component 方法

在 vue3 中我通常使用 provide/inject 。方法

提供

const app = createApp(App);
app.provide('someVarName', someVar); // `Provide` a variable to all components here

注入(inject):

// In *any* component
const { inject } = Vue;
...
setup() {
const someVar = inject('someVarName'); // injecting variable in setup

return {someVar}
}

关于vue.js - 访问 Vue3 全局组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66273763/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com