比如 element 组件 el-select,change 事件重写,返回更多的参数:

<el-select @change="changeSelect" v-on="$listeners">xxx</el-select>

method: {
	changeSelect(val) {
		this.$emit('change', val) 
	}
}

使用:

<EccSelect @change="selectChange"></EccSelect>

结果: 执行2次 , 多一个 undefined

第一个是v-on=“$listeners”, 第二个是@change="onSelectChange
在这里插入图片描述

解决:去掉 @change=“changeSelect”, 使用 new$listeners 继承原有属性,并覆盖原有事件

<el-select v-on="new$listeners">xxx</el-select>
computed: {
    new$listeners() {
      return Object.assign(this.$listeners, {
        change: this.changeValue
      })
    }
  }

更多参考出处:

https://www.h5w3.com/112064.html

Logo

前往低代码交流专区

更多推荐