淘人居士 2021-02-25 11:07 采纳率: 33.3%
浏览 2396
已采纳

vue的jsx写法中如何使用component动态组件?

已知vue的template语法中,动态组件是这么写的

<component v-bind:is="currentTabComponent"></component>

换成jsx写法

 <component is={this.currentTabComponent} ></component>

这样似乎行不通,运行会报错:

Unknown custom element: <component> - did you register the component correctly……

完整代码如下:

import { Component, Vue } from "vue-property-decorator";
import utab from '@/components/utab.vue';
import style from './index.module.scss';
@Component({
    components: {
        apply: () => import('./apply/index.vue'),
        scale: () => import('./scale/index.vue'),
        hazard: () => import('./hazard/index.vue'),
        desktop: () => import('./desktop/index.vue'),
        utab
    }
})
export default class ManageIndex extends Vue {
    //#region data
    currentTabComponent = 'apply';
    tabs: Views.VTabItem[] = [
        { label: 'VTE系统开通', value: 'apply' },
        { label: 'VTE量表维护', value: 'scale' },
        { label: 'VTE风险因素', value: 'hazard' },
        { label: '医护端管理', value: 'desktop' }
    ];

    //#endregion data
    render() {
        return (
            <div class={style['systemopt-cont']}>
                <utab tabs={this.tabs} v-model={this.currentTabComponent} />
                <keep-alive>
                    <component is={this.currentTabComponent} class={style.routerview} />
                </keep-alive>
            </div>
        );
    }
}
  • 写回答

2条回答 默认 最新

  • weixin_52352490 2021-05-20 17:25
    关注

    可以使用计算属性返回动态组件

    {
        computed: {
            component () {
               if (!this.componentName) { return null }
               const Tag = this.componentName
               return <Tag></Tag>
            }
        },
        render() {
            return <div class="warp">{this.component}</div>
        }
    }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 管道轴向耦合水击问题
  • ¥60 补全networkx TODO部分。
  • ¥15 有内推吗,云计算linux运维方向
  • ¥30 sort cuteSV.vcf by bcftools用IGV可视化出现报错
  • ¥100 SOS!对STK中导出的天体图像进行质心提取有没有人做过啊
  • ¥15 python 欧式距离
  • ¥15 运行qteasy报错
  • ¥15 遗传算法解决有工序顺序约束的大规模FJSP问题
  • ¥15 企业消防水炮塔设计方案
  • ¥20 WORKBENCH网格划分