javascript - 为什么Vue事件不向上传播？

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>

如果这不是 child 与 parent 沟通的正确方式，那什么才是？

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>