在内置事件除自带参数外额外传递自定义参数

原理：https://blog.csdn.net/mChales_Liu/article/details/112558081

举个例子：

change 事件传递额外的参数

react 版：

const reactOnChange = () => {

  const handleChangeExtend = (num, e) => {// 应与实参顺序保持一致
    const value = e.target.value;
    console.log('v-n', value, num);
  }

  return (
    <div>
      <input onChange={(e) => handleChangeExtend(110, e)}/>{/* 参数与顺序无关 */}
    </div>
  )
}

或

const reactOnChange = () => {

  const handleChangeExtend = (num, e) => {// 应与实参顺序保持一致
    const value = e.target.value;
    console.log('v-n', value, num);
  }

  return (
    <div>
      <input onChange={handleChangeExtend.bind(this, id)}}/>{/* 参数与顺序无关 */}
    </div>
  )
}

【注意】：

• 上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。
• 在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

 

vue 版：

<template>
  <div>
    <input @change="(e) => handleChange(e, 110)"><!-- 参数与顺序无关 -->
  </div>
</template>
<script>
export default {
  methods: {
    handleChange: (e, num) => {// 应与实参顺序保持一致
      const value = e.target.value;
      console.log('v-n', value, num);
    }
  },
}
</script>

或

<template>
  <div>
    <input @change="handleChange($event, 110)">
  </div>
</template>
<script>
export default {
  methods: {
    handleChange: (e, num) => {
      const value = e.target.value;
      console.log('v-n', value, num);
    }
  },
}
</script>