vue2动态组件动态绑定事件;component标签动态绑定事件;component组件动态绑定事件

业务需求

组件通过 component动态生成,基于v-bind绑定事件时事件不生效。

错误示范

在这里插入图片描述

VUE2的解决办法

因为是动态绑定所以不确定会在未来绑定多少事件,所以直接预定绑定n个事件,我预制了六个基本同一个组件也不会超过六个事件了如果在需要就在继续加即可。

例如需要绑定 @click 则将 schema.events.a0.name 赋值为 click 并将对应事件函数绑定给 schema.events.a0.fun

存在小问题: 可能 我只需要绑定一个click 其余的a1-a5都闲置了 会报错。
报错为:Invalid handler for event “方法名“: got undefined(点击查看处理方法

示例代码如下:

    <component 
      @[schema.events.a0.name]="schema.events.a0.fun"
      @[schema.events.a1.name]="schema.events.a1.fun"
      @[schema.events.a2.name]="schema.events.a2.fun"
      @[schema.events.a3.name]="schema.events.a3.fun"
      @[schema.events.a4.name]="schema.events.a4.fun"
      @[schema.events.a5.name]="schema.events.a5.fun"
      :is="item.component"
      :key="item.field + index"
      v-model="formModel[item.field]"
    />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Web_Lys

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

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

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

打赏作者

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

抵扣说明:

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

余额充值