ElementUI,在事件中传递自定义参数的两种方式

ElementUI,在事件中传递自定义参数的两种方式

在使用ElementUI的时候,组件的事件会返回一些参数或者动作,有的时候我们想在这个时间点传入自己代码中的参数,因此在这里记录两种传递自定义参数的方式。

下面以 el-input 组件的 @change 事件为例:

  • 方式1:利用回调函数
cobol 复制代码
<el-input v-model="input" placeholder="Please input" @change="(val)=>change(val, 'myId')"/>
typescript 复制代码
change(val, id) {
  console.log('val == ' + val)
  console.log('id == ' + id)
}

上面的代码将事件回调的val参数作为入参传给了一个匿名函数,匿名函数的函数体返回了自定义的方法change,而change的第一个参数val就是原本事件传回的值,在该值之后就可以加入自己想传的参数。此时在输入框中输入666,那么最终结果为:

val == 666

id == myId

  • 方式2:利用$event
cobol 复制代码
<el-input v-model="input" placeholder="Please input" @change="change($event, 'myId')"/>

$event 是事件传回来的回调,等同于方式1中的 val

输出结果与1相同。

相关推荐
xjt_09018 分钟前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农20 分钟前
Vue 2.3
前端·javascript·vue.js
夜郎king44 分钟前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳1 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵2 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星2 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_2 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝2 小时前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions2 小时前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发2 小时前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法