Почему Vue Event не распространяется?

Question

При отправке события из дочернего компонента, почему содержащее приложение не перехватывает событие?Посмотрите код ниже для очень простого примера.При нажатии на одну из ссылок я ожидаю оповещения для «приложения», за которым следует оповещение для «компонента».Вместо этого он дает только «компонент».

Vue.component('list-item', {
  template: '<li><a href="#" v-on:click.prevent="itemClick">click</a></li>',
  methods: {
    itemClick() {
      this.$emit('item-event');
      alert('component');
    }
  }
});

new Vue({
  el: "#app",
  data: {
    items: [
      'a', 'b', 'c'
    ]
  },
  methods: {
    itemClick: function() {
      alert('app');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" v-on:item-event="itemClick">
  <ol>
    <li is="list-item" v-for="item in items"></li>
  </ol>
</div>

Если это неправильный способ общения от детей до родителей, что это такое?

Answer 1

События Vue не всплывают в дереве DOM.Вам необходимо прослушать событие на компоненте list-item, который генерирует событие:

Vue.component('list-item', {
  template: '<li><a href="#" v-on:click.prevent="itemClick">click</a></li>',
  methods: {
    itemClick() {
      this.$emit('item-event');
      alert('component');
    }
  }
});

new Vue({
  el: "#app",
  data: {
    items: [
      'a', 'b', 'c'
    ]
  },
  methods: {
    itemClick: function() {
      alert('app');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ol>
    <li is="list-item" v-for="item in items" v-on:item-event="itemClick"></li>
  </ol>
</div>