vue 如何绑定动态事件

我这么绑定vue的动态事件，报这个错误，vue绑定动态事件是这么绑定的吗？有解决的办法吗？

如果你是想绑定input的改变事件这样就行了


```html
<template>
    <div>
     <el-input v-model="name" @input="change"></el-input>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                name:''
            }
        },
        methods:{
            change(val){
                console.log(val)
            }
        }
    }
</script>

```

这个错误提示通常是因为 v-on 绑定的事件处理程序不是一个函数类型导致的。在你代码中，v-on 绑定的事件处理程序是 changeName 方法，因此可能是 changeName 方法不是一个函数类型导致的。可以先走一个统一处理方法是函数才执行

<template>
  <div>
    <el-input v-for="(item, index) in list" :key="index" v-on:[item.event]="handleEvent(item.eventName)"></el-input>
  </div>
</template>

<script>
export default {
  name: "eventPage",
  data() {
    return {
      name: '',
      list: [{ event: "change", eventName: "changeName" }]
    }
  },
  methods: {
    handleEvent(eventName) {
      const handler = this[eventName]
      if (typeof handler === 'function') {
        return handler
      } else {
        console.warn(`Event handler "${eventName}" is not a function.`)
      }
    },
    changeName() {
      console.log('change事件')
    }
  }
}
</script>

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7675393
你也可以参考下这篇文章：vue事件绑定中的事件修饰符
除此之外, 这篇博客: vue自定义指令和自定义事件中的 自定义事件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

可用于父子传值


<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- *父监听子发生的事件 -->
        <cpn @itemclick="cpnclick"></cpn>
    </div>

    <!-- 子组件 -->
    <template id="cpn">
        <div>
            <!-- *把数据传过去，注意写item -->
            <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
        </div>
    </template>

    <script src='../js/vue.js'></script>

    <script>
        //定义子组件
        const cpn = {
            template: '#cpn',
            data() {//这里dada是一个函数
                return {
                    categories: [
                        { id: 'aaa', name: '家用电器' },
                        { id: 'bbb', name: '手机电脑' },
                        { id: 'ccc', name: '汽车用品' },
                        { id: 'ddd', name: '个人清洁' }
                    ]
                }
            },
            methods: {
                // *
                btnclick(item) {
                    // console.log(item)
                    this.$emit('itemclick',item)//通过$emit自定义一个事件itemclick（名字随便写），item是传过去的数据
                }
            },
        }
        //父组件
        const app = new Vue({
            el: '#app',
            data: {
                
            },
            components: {
                cpn,
            },
           methods:{
                //*监听子组件传过来的数据
                cpnclick(item){// 这个item可以随便取名字
                    // console.log(1111)
                    console.log('cpnclick',item)
                }
            }
        }) 
    </script>
</body>
</html>

您还可以看一下马金聚老师的Vue全家桶技术+商城项目实战+源码解析课程中的 Vue指令之事件修饰符小节, 巩固相关知识点