Vuejs2 对于vue，为什么要使用div'；s删除事件无效？

我想通过vue手册学习v-for和模板。 对于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 = ''
    }
  }
})

Vue.component（'todo-item2'{
模板：“
{{title}}-{{id}}X
”，
道具：['title'，'id']，
方法：{
testFunc:函数（）{
console.log（'div click event trigger'）
},
testRemove:函数（）{
console.log（'div remove event trigger'）
}
}
}) 
var app7=新的Vue({
el:“#app-7”，
数据：{
新文本：“”，
待办事项：[
{
id:1，
标题：“洗碗”
},
{
id:2，
标题：“倒垃圾”
},
{
id:3，
标题：“割草机”
}
],
下一步：4
},
方法：{
addNewTodo:函数（）{
这个。待办事项。推({
id:this.nextTodoId++，
标题：this.newTodoText
})
this.newTodoText=“”
}
}
})

我发现单击按钮导致删除li标签，所以我知道触发了li的删除事件。但我不明白为什么div'remove事件没有被触发。谁能告诉我的$emit（'remove'）？

---

$emit（args）触发的当前实例事件意味着什么？

您的div组件没有

删除
事件。如果更改为
click
event（
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.component（'todo-item2'{
模板：“
{{title}}-{{id}}X
”，
道具：['title'，'id']，
方法：{
testFunc:函数（）{
console.log（'div click event trigger'）
},
testRemove:函数（）{
console.log（'div remove event trigger'）
}
}
})

默认情况下，Vue支持
DOM事件

已更新

v-on:click=“$emit（\'remove\'）”
将调用此。$emit事件。这里，这将是
todo-item2
组件。它只向todo-item2的父级发出事件，我仍然不理解它。我抬头一看，其实没有移除事件。为什么v-on:remove for todo-item2有效？所以我点击按钮，什么是heppen？实际上，我单击按钮导致li的v-on:remove事件发生。
v-on:click=“$emit（\'remove\”）
将调用此。$emit
事件。在这里，
这个
将是
todo-item2
组件。它只向todo-item2的父级发出事件。它只向todo-item2的父级发出事件？todo-item2是否应该修复此事件？
todo-item2
是
li
元素。这里，
这个
是
li
元素<代码>此。$emit

将向

li

的父级发出事件。如果您在

div

元素（按钮的父元素，而不是

li

元素）中收听

remove

事件，则不会在此处捕获事件。