VUE第三方组件默认方法事件中，如何一起传入默认参数和自定义参数

最新推荐文章于 2025-10-26 23:43:07 发布

原创最新推荐文章于 2025-10-26 23:43:07 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

工作遇到的bug

3 篇文章

订阅专栏

本文介绍如何在使用Vue框架及第三方组件库时，针对组件自带的@change事件进行自定义参数传递的方法。通过示例展示了如何在事件触发时不仅获取到默认参数newVal和oldVal，还能额外接收自定义参数的过程。

开发时使用第三方组件库的部分组件时，想要自定义组件自带的@change事件，比如有的组件@change事件默认传入 newVal, oldVal两个参数，可以用如下写法

<bk-checkbox-group v-model="props.row" @change="rowAuthTypeChange">
		<bk-checkbox :value="'使用'">使用</bk-checkbox>
        <bk-checkbox :value="'管理'">管理</bk-checkbox>
</bk-checkbox-group>

methods: {
    rowAuthTypeChange(newVal, oldVal) {
      console.log(newVal, oldVal); 
    }
},

如果除默认参数 newVal, oldVal外，需求上还需要再传递一个自定义参数 props 该如何处理呢？
可以考虑到使用$event

<bk-checkbox-group @change="rowAuthTypeChange(props, $event)"></bk-checkbox-group>

methods: {
    rowAuthTypeChange(props, event) {
      console.log(props, event); 
    }
},

结果会发现 event结果为newVal，而并非{newVal, oldVal}，默认的第二个参数 oldVal仍无法传递。
可以尝试这个方法：

<bk-checkbox-group
	v-model="props.row"
	@change="(newVal, oldVal) => { rowAuthTypeChange(props.row, newVal, oldVal); }"
>
	<bk-checkbox :value="'使用'">使用</bk-checkbox>
	<bk-checkbox :value="'管理'">管理</bk-checkbox>
</bk-checkbox-group>

methods: {
    rowAuthTypeChange(row, newVal, oldVal) {
      console.log(row, newVal, oldVal); 
    }
},

问题解决！