编码技巧收集六 ~ vue动态组件注册事件

场景：

   根据用户配置的事件动态绑定。也就是用户可以动态选择配置 click ，change，blur等事件

需要根据用户的配置的事件动态绑定 @click、@change或@bulr

方式一

<template>
  <div>
    <el-input v-for="(item,index) in list"
        :key="index"
        v-on:[item.event]="item.eventName"></el-input>
  </div>
</template>
<script>
export default {
    name: "eventPage",
    data() {
        return {
            list: [{ event: "change" ，eventName："changeName"}]
            }
        },
    methods: {
        changeName(){
            console.log('change事件')
        }
    }
};
</script>
 

动态事件。可以缩写：

 <el-input @[item.event]="item.eventName"></el-input>

存在小问题：

      可能 某些组件 只需要绑定一个click 都闲置了 会报错。
报错为：Invalid handler for event “方法名“: got undefined

绑定的该方法该组件未定义该方法

解决方法：
1：检查绑定事件拼写是否出错。
2：若故意为之则将绑定事件设置为空 写法： @[‘’] = “()=>{}”

方式二：

可以使用$on(eventName, callback)以编码方式添加事件监听器：

new Vue({
  el: '#app',
  created() {
    const EVENTS = [
      {name: 'my-event1', callback: () => console.log('event1')},
      {name: 'my-event2', callback: () => console.log('event2')},
      {name: 'my-event3', callback: () => console.log('event3')}
    ]

    for (let e of EVENTS) {
      this.$on(e.name, e.callback); // Add event listeners
    }
  }
})

可以使用 v-on="{event1: callback, event2: callback, ...}" 以声明方式绑定多个事件侦听器：

<div id="app">
  <input type="text" placeholder="type here" v-on="{click: onClick, keyup: onKeyUp}">
</div>