Почему $ emit не работает в моем компоненте vue

Question

Я бился головой об эту проблему часами.Я не вижу проблемы и из того, что я могу сказать, я следую документации здесь: https://vuejs.org/v2/guide/components-custom-events.html

код ниже

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="wrap">
  <test-listen>
    <test-emit></test-emit>
  </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' v-on:custom="customHandler">
      <slot></slot>
    </div>
  `
});

Vue.component('test-emit',{
  data: function(){
    return {};
  },
  methods: {
    clickHandler : function(){
      this.$emit('custom');
    }
  },
  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>

Но слушатели определенно привязаны к элементу, потому что если я отправляю vanillaJS CustomEvent, он прекрасно запускает консольный журнал.Чего мне не хватает?

Answer 1

Я вижу только одну ошибку здесь.Вы должны добавить v-on к дочернему компоненту.когда вы $ emit ('custom') изнутри, он вызовет "customHandler" для компонента parrent.

Working jsfiddle

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

Answer 2

Здесь две вещи неправильные.

1. События Vue могут быть привязаны только к компонентам. Я думаю, [здесь речь идет о событиях Vue]
2. Solts не подходят для событий, утвержденных автором.[источник: https://github.com/vuejs/vue/issues/4332]

Если вы действительно хотите передавать данные здесь и там без ограничений, лучше использовать Global Event Bus Approach

Рабочий пример вашего кода с небольшим исправлением.

<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>

Answer 3

С помощью this.$emit() можно сказать родительскому компоненту, что эй, я создал событие, и теперь вы можете прослушивать это событие

У вас все хорошо, но у вас нетпрослушивать в родительском компоненте событие, генерируемое дочерним элементом. Я заставил его работать. Нажмите здесь, чтобы увидеть его в действии

Итак, чтобы заставить ваш код работать, в компоненте test-listen используйте в качестве дочернего компонент test-emit.

Затем внутри div #wrap используйте компонент test-listen

Ваша проблема заключалась в том, что вы не прослушали событие в родительском компоненте.