淘人居士
2021-02-25 11:07
采纳率: 31.3%
浏览 970

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>
        }
    }
    已采纳该答案
    打赏 评论
  • wanmeikakaxi 2021-02-25 13:44

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

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

    1 打赏 评论

相关推荐 更多相似问题