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

Question

我使用 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”类型中不存在“组件”。您的意思是写“组件”吗？

我该如何解决？

标签： javascripttypescriptvue.jsvue-class-components

Answer 1

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

在模板中

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

---

在计算中

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