¿Por qué $ emit no funciona en mi componente vue?

Solución:

Veo solo un error aquí. Deberías agregar v-on al componente hijo. Cuando usted $emit('custom') desde dentro llamará “customHandler” en el componente principal.

Jsfiddle de trabajo

    <test-listen>
        <test-emit v-on:custom="customHandler"></test-emit>
    </test-listen>
  

Con this.$emit() es una forma de decirle al componente principal que hey creé un evento y ahora puedes escuchar en este evento

Lo está haciendo bien, pero no escucha en el componente principal el evento emitido por el niño. Lo hice para trabajar. Haga clic aquí para verlo en acción

Entonces, para que su código funcione, en el componente test-listen, use como hijo el componente test-emit.

Luego dentro del div #wrap utilizar el componente test-listen

Su problema fue que no escuchó el evento en el componente principal.

Hay dos cosas mal aquí.

1. Los eventos de Vue pueden estar vinculados a componentes solo, supongo [talking vue events here]
2. Los solts no son buenos con los eventos aprobados por el autor. [source : https://github.com/vuejs/vue/issues/4332]

Si realmente desea pasar datos aquí y allá sin restricciones, es mejor usar Global Event Bus Approach

Ejemplo funcional de su código con algunas correcciones menores.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="wrap">
  <test-listen>
  </test-listen>
</div>
<script>
Vue.component('test-listen', {
  data: function(){
    return {};
  },
  methods: {
    customHandler : function(e){
      console.log(e);
      console.log("works");
    }
  },
  template: `
    <div class="test_listen" >
      <test-emit v-on:custom="customHandler"></test-emit>
    </div>
  `
});

Vue.component('test-emit',{
  data: function(){
    return {};
  },
  methods: {
    clickHandler : function(e){
      // e => event : didnt pass here as console will stuck so
      this.$emit('custom', 'somedata');
    }
  },
  template : `
    <div class="test_emit" v-on:click="clickHandler">
      test
    </div>
  `
});

new Vue({
  el:"#wrap"
});
</script>
<style>
.test_listen{
  display:block;
  padding:20px;
  border:1px solid #000;
}
.test_emit{
  display:block;
  width:100px;
  height:100px;
  background-color:#f0f;
  color:#fff;
  font-weight:700;
  font-size:20px;
}
</style>

---

---

Utiliza Nuestro Buscador