web前端

Vue 事件参数传递

vue绑定事件的有时候需要传递很多参数,在此整理几种传递方式

1. 默认传参

<zs-input @change="handleChange($event)"></zs-input>

或(第一个参数会默认传进去)

<zs-input @change="handleChange"></zs-input>

使用:

handleChange(event){
    console.log(event)
}

2. 赋值传参

如果手动赋值或覆盖掉默认的参数

<zs-input @change="handleChange('hello')"></zs-input>

使用:

handleChange(event){
    console.log(event) // hello
}

3. 混合传参

当需要使用默认值和手动传参同事出现时一般使用这种方式

<zs-input @change="handleChange($event, 'hello')"></zs-input>

使用:

handleChange(event, val){
    console.log(event, val)
}

4. 多默认值混合传参

当默认参数有多个是,使用上述方式同样会出现问题,这时就需要使用本方式

<zs-input @change="handleChange(arguments, 'hello')"></zs-input>

使用:

handleChange(args, val){
    console.log(args, val)
}

发表评论

电子邮件地址不会被公开。