Vue2是否支持给v-on修饰符动态指定eventType?
如题,目前在做低代码相关的工作,但是旧代码的组件引用关系非常抽象,而且绑定事件也不够灵活,所以希望在事件绑定的范畴内优化一下。在查阅Vue文档之后,发现文档里并未提到这种做法。我的设想是通过指定变量的方式来指定某个输入框/按钮能动态绑定某一类型的事件;如果无法通过变量来指定触发的事件类型,那么在v-on传入一个对象时,其中的回调函数如何传入剩余参数?
<template>
<div id="app">
<div class="box" v-on:eventType="eventList" v-for="(item, index) in child" :key="index">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
name: 'APP',
data() {
return {
eventList: {
mouseenter: this['mouseenter'],
mouseleave: this['mouseleave'],
click: this['handleClick'],
},
child: [
{
name: 'c1'
},
{
name: 'c2'
}
],
eventType: 'click'
}
},
methods: {
mouseenter(e) {
console.log(e)
},
mouseleave(e) {
console.log(e)
},
handleClick(e) {
console.log(e)
},
},
mounted() {
}
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
display: flex;
flex-direction: column;
gap: 20px;
}
@mixin boxafter {
content: '';
width: 100%;
height: 100%;
border: 1px solid;
position: absolute;
}
.box {
width: 100px;
height: 100px;
position: relative;
background-color: #aed;
}
</style>
在eventList中的mouseenter回调函数,在触发时,只能接收到默认的事件对象, 如果此时需要额外传入一个item,应该如何实现呢?希望路过的大佬指教一下
如果模板比较简单,可以考虑使用 h 函数。