Почему $emit('someEvent', 0) передает ивент 2 раза?

Question

[sirinotapple]

Здравствуйте
У меня есть родительский компонент (App.vue)

<template>
  <HelloWorld @change="handle"/>
</template>

<script>
import HelloWorldVue from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },
  methods:{
    handle(e){
      console.log(e);
    }
  }
};
</script>

и дочерний HelloWorld.vue

<template>
  <div class="hello">
     <input type="file" @change="$emit('change', 0)">
  </div>
</template>

<script>
export default {
  name: "HelloWorld",

};
</script>

Но почему при выборе файла handle вызывается 2 раза то-есть в консоли сначала 0 а потом event? (мне нужен только 0)

0
Event {isTrusted: true, type: "change", target: HTMLInputElement, currentTarget: null, eventPhase: 0…}

Answer 1

[Михаил]

У вас браузерное событие change "всплывает" в верхний компонент и ваше собственное событие change - туда же.

Собственно либо "разведите" название событий, либо остановите всплывание браузерного (модификатор .stop)

Документация Vue

Comments

[0xD34F]

Документация Vue

Ссылку надо бы поправить - автор вопроса использует третью версию, а не вторую.

Также есть и третий способ решения заявленной проблемы - указать событие в emits.