自定义事件不使用 emit:[‘event name’],会出现连续执行 2 次的一个 bug。

一、问题复现

Emits.vue

1
2
3
4
5
<template>
  <div @click="$emit('click')">
    <p>自定义事件</p>
  </div>
</template>

使用 Emits.vue

1
<Emits @click="handleClick"></Emits>
1
2
3
4
5
6
7
8
9
10
11
import Emits from "./Emits.vue";
export default {
  components: {
    Emits,
  },
  methods: {
    handleClick(){
      console.log("click me");
    }
  },
};

点击自定义事件，会打印2次click me

二、解决方法：

方法1、在Emits.vue中加入以下代码

1
emits:['click']

方法2、不要使用原生事件名称

Emits.vue

1
2
3
4
5
<template>
  <div @click="$emit('my-click')">
    <p >自定义事件</p>
  </div>
</template>
1
2
3
4
5
6
7
8
9
<script>
  export default {
    emits:['my-click']
  }
</script>

<style scoped>

</style>

引用处：

1
<Emits @my-click="handleClick"></Emits>