对于vue，为什么div的remove事件无效？

Question

我想通过vue手册学习vue和模板。对于v-for和组件，我的代码：

<div id="app-7">
  <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
  <ul>
    <todo-item2
        v-for="(todo, index) in todos"
        v-bind:key="todo.id"
        v-bind:id="todo.id"
        v-bind:title="todo.title"
        v-on:remove="todos.splice(index, 1)">
    </todo-item2>
  </ul>
</div>

我的main.js代码是：

Vue.component('todo-item2', {
  template: '<li>{{ title }}-{{ id }}<div v-on:remove="testRemove"><button v-on:click="$emit(\'remove\')">X</button></div></li>',
  props: ['title', 'id'],
  methods: {
    testFunc: function () {
      console.log('div click event trigger')
    },
    testRemove: function () {
      console.log('div remove event trigger')
    }
  }
}) 

var app7 = new Vue({
  el: '#app-7',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes'
      },
      {
        id: 2,
        title: 'Take out the trash'
      },
      {
        id: 3,
        title: 'Mow the lwan'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

我发现单击按钮会导致删除li标签，所以我知道li的删除事件是触发的。但是我不明白为什么不触发div‘’remove事件。谁能告诉我的$emit(‘删除’)？$emit(args)触发当前实例事件意味着什么？

Answer 1

您的div组件没有remove事件。如果更改为click事件(v-on:click="testRemove")，则可以看到控制台日志div remove event trigger

Vue.component('todo-item2', {
  template: '<li>{{ title }}-{{ id }}<div v-on:click="testRemove"><button v-on:click="$emit(\'remove\')">X</button></div></li>',
  props: ['title', 'id'],
  methods: {
    testFunc: function () {
      console.log('div click event trigger')
    },
    testRemove: function () {
      console.log('div remove event trigger')
    }
  }
})

默认情况下，Vue on support DOM events event.asp

更新的

v-on:click="$emit(\'remove\')"将调用这个.$emit事件。这里，这将是todo-item2组件。它只向todo-item2的父级发出事件。