如何在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: Store<……比;|零;}'不能赋值给'VueClass'类型的参数。对象文字只能指定已知的属性，但是'components'在类型'VueClass'中不存在。你的意思是写"组件"吗?

我该如何修复它?

Answer 1

可能

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

?

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

Answer 2

您可以在这里使用computed。当你想基于某些条件加载组件时

在模板

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

---

在计算

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