vue-自定义事件的方法增加参数

demo

// 子组件 my-button
<template>
  <button @click="onChange">按钮</button>
</template>
<script>
    export defaut {
        methods: {
            onChange(){
                this.$emit('change', 'hello')
            }
        }
    }
</script>

// 父组件
<template>
  <div>
    <my-button @change="handleChange(i)" v-for="i in 5" :key="i" />
  </div>
</template>
<script>

export default {
  methods: {
    handleChange(info, idx) {
      console.log(info, idx); // 1-5, undefined
    }
  }
};
</script>

解决方案

• 使用函数包裹

<template>
  <div>
    <my-button
      @change="
        (...info) => {
          handleChange(info, i);
        }
      "
      v-for="i in 5"
      :key="i"
    />
  </div>
</template>
<script>
export default {
  methods: {
    handleChange(info, idx) {
      console.log(info, idx); // hello, 1-5
    }
  }
};
</script>

• 使用$event占位符

<template>
  <div>
    <my-button @change="handleChange($event, i)" v-for="i in 5" :key="i" />
  </div>
</template>
<script>
export default {
  methods: {
    handleChange(info, idx) {
      console.log(info, idx); // hello, 1-5
    }
  }
};
</script>