vue动态添加组件

使用场景

有一个列表页如下,当我点击查看的时候,
在这里插入图片描述
会弹窗,弹窗的主要内容是组件,
在这里插入图片描述

每个组件的内容都不一样,我不可能在这个列表页把所有的组件都import进来,所以在弹窗显示的时候scope.row获取当前记录的信息,然后根据信息中的对应关键字段(如下面我代码中的programe_id)就是组件唯一的文件名,拼接一下就能动态添加组件

例如需要添加的组件如下:
在这里插入图片描述

核心代码

methods:{
  add(msg){
    let programe_id = msg.programe_id
    this.$options.components['appTable'] = require('@/components/apps/app' + programe_id+"temp.vue").default
  }
},
render: function (createElement) {
    return createElement('appTable')
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

just路人周

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值