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

Posted 2023-02-22

【中文标题】如何在 vue-class-component 中使用动态组件

【英文标题】：How to use dynamic component in 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”类型中不存在“组件”。你的意思是写“组件”吗？

我该如何解决？

【参考方案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`)
    
,