kw269937519
淘人居士
采纳率26.7%
2021-02-25 11:07

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>
        );
    }
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • wanmeikakaxi wanmeikakaxi 2月前

    使用:is 与 is 用法是有区别的

    使用is方法要在component注册这个组件,才能用 is 引用

    点赞 评论 复制链接分享