ElementUI 事件回调函数传参技巧与自定义参数应用

ElementUI 事件回调函数传参技巧与自定义参数应用

在使用elementUI时，事件回调函数传递参数是一个常见的需求。根据搜索结果，我们可以了解到两种主要的方法来传递自定义参数：

1. 使用回调函数：当elementUI组件触发事件时，我们可以通过回调函数传递自定义参数。例如，在el-input组件中，可以使用@change事件，并在回调函数中添加自定义参数。代码示例如下：

   <el-input v-model="input" placeholder="Please input" @change="(val)=>change(val, 'myId')"/>
   

   在方法中，val是事件传递的默认参数，而'myId'是我们自定义的参数 。

2. 使用$event：另一种方法是使用$event来传递事件对象，然后将其作为参数传递给自定义的方法。例如：

   <el-input v-model="input" placeholder="Please input" @change="change($event, 'myId')"/>
   

   这里的$event等同于方法1中的val，而'myId'依然是自定义参数 。

对于表单校验，elementUI的自定义校验规则中，必须使用callback函数来返回校验结果。如果校验不通过，需要返回一个新的Error对象，如果通过，则调用callback函数而不带任何参数。每个校验分支都必须调用callback，否则表单校验可能不会按预期工作 。

此外，还有关于在@change等事件中传递多个参数的讨论，说明了可以使用箭头函数来包装回调函数，从而传递额外的参数 。

最后，值得注意的是，在Vue.js中，虽然事件通常用于组件间的通信，但在某些情况下使用回调可能更为合适，尤其是当我们希望确保父组件能够处理某个操作时 。

综上所述，elementUI的事件回调函数可以通过回调函数或$event来传递自定义参数，同时确保在自定义校验规则中正确使用callback函数。