vue select change事件如何传递自定义参数

 更新时间:2022年04月07日 14:47:48   作者:JiaPeng366  
这篇文章主要介绍了vue select change事件如何传递自定义参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

select change事件传递自定义参数

今天记录一个小问题,最近get到的一个方法,不太常用,记录一下,增强记忆吧。

之前在vue项目中,也经常使用select标签,也经常用change事件,经常用的change事件中,一直有个默认参数,就是选中的选项的信息,最近一个需求除了需了选中项信息外,还需要其他的参数。

今天记录一下这种传参方式,直接上代码。

// 普通用法,没有自定义参数
@change="handleChange"
handleChange (event) {
    // event.target.value 是change事件默认传的信息
    console.log(event.target.value)
}
// 需要传自定义参数时
@change="handleChange($event, '自定义参数')"
handleChange (event, param) {
    // event.target.value 是change事件默认传的信息
    // param 是自定义的参数
}

@change函数传自定义参数

在vue项目中,某些场景中CheckBox等一些组件的@change函数需要传一些自定义参数

实例

<el-checkbox label="hello" v-model="helloNum" @change="changeFunc($event,'自定义参数')" ></el-checkbox>
methods: {
    changeFunc(val,'自定义参数') {
        console.log(val,'自定义参数')
        //打印结果是:true/false ,'自定义参数'
    }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue2组件进阶与插槽详解(推荐!)

    vue2组件进阶与插槽详解(推荐!)

    插槽(slot)作用是让父组件可以往子组件指定位置插入 html 结构,也是组件的一种通信方式,下面这篇文章主要给大家介绍了关于vue2组件进阶与插槽的相关资料,需要的朋友可以参考下
    2023-02-02
  • Vue3中嵌套路由和编程式路由的实现

    Vue3中嵌套路由和编程式路由的实现

    Vue Router在Vue.js的核心库上提供了路由的功能,使得我们可以在单页应用中实现页面的切换、跳转和参数传递等功能,本文主要介绍了Vue3中嵌套路由和编程式路由的实现,感兴趣的可以了解一下
    2023-12-12
  • Vue集成百度地图实现位置选择功能

    Vue集成百度地图实现位置选择功能

    由于添加门店时,需要选择门店的省、市、区、详细地址、以及门店的经纬度信息,本文给大家分享Vue集成百度地图实现位置选择功能,感兴趣的朋友一起看看吧
    2022-06-06
  • vue如何封装自己的Svg图标组件库(svg-sprite-loader)

    vue如何封装自己的Svg图标组件库(svg-sprite-loader)

    这篇文章主要介绍了vue如何封装自己的Svg图标组件库(svg-sprite-loader),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue 路由meta 设置导航隐藏与显示功能的示例代码

    vue 路由meta 设置导航隐藏与显示功能的示例代码

    这篇文章主要介绍了vue 路由meta 设置导航隐藏与显示功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 浅谈el-table中使用虚拟列表对对表格进行优化

    浅谈el-table中使用虚拟列表对对表格进行优化

    我们会经常使用表格,如果数据量大就直接可以分页,如果多条可能会影响表格的卡顿,那么应该如何进行优化,感兴趣的可以了解一下
    2021-08-08
  • vue自定义开发滑动图片验证组件

    vue自定义开发滑动图片验证组件

    这篇文章主要为大家详细介绍了vue自定义开发滑动图片验证组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    这篇文章主要介绍了Vue如何提升首屏加载速度实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • vue项目引入ts步骤(小结)

    vue项目引入ts步骤(小结)

    这篇文章主要介绍了vue项目引入ts步骤(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • reactive readonly嵌套对象转换功能实现详解

    reactive readonly嵌套对象转换功能实现详解

    这篇文章主要为大家介绍了reactive readonly嵌套对象转换功能实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论