如何在 vue-class-component 中使用动态组件答案

【问题标题】：How to use dynamic component in vue-class-component如何在 vue-class-component 中使用动态组件
【发布时间】：2021-10-27 02:49:16
【问题描述】：

我使用 vue vue-class-component 并且效果很好：

import vuetify from '@/plugins/vuetify'
@Component({
    components: {
        vue2Dropzone
    },
    vuetify
})

但是当我尝试添加仅用于生产的新组件时：

import store from '../store/Index'
let storeTmp = process.env.NODE_ENV === 'production' ? store : null
@Component({
    components: {
        vue2Dropzone
    },
    vuetify,
    storeTmp
})

我有错误：

类型参数 '{ components: { vue2Dropzone: any }; Vuetify：Vuetify； storeTmp: 存储<...> |空值; }' 不可分配给“VueClass”类型的参数。对象字面量只能指定已知属性，但“VueClass”类型中不存在“组件”。你的意思是写“组件”吗？

我该如何解决？

【问题讨论】：

标签： javascript typescript vue.js vue-class-components

【解决方案1】：

也许

@Component({
    components: {
        vue2Dropzone
    },
    vuetify,
    store: storeTmp
})

Vue 实例中没有 storeTmp 属性，但是有 store。

【讨论】：

【解决方案2】：

您可以在此使用计算。当您想根据某些条件加载组件时

在模板中

<component v-bind:is="importComponent" :anyPropsYouWantToPas="props" />

在计算中

importComponent() {
    if (process.env.NODE_ENV === 'production) {
        return () => import(`@/components/app/componentpath`)
    }
},

【讨论】：