For vue, why div's remove event invalid? - vuejs2

Question

I want study v-for and template by vue manual.
For v-for and components, My code:
<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>
My main.js code is:
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 = ''
}
}
})
I found that click button cause to remove li label, so I know li's remove event is triggered. But I don't understand why div'remove event is not triggered. Who can tell my $emit('remove')?
What's mean for $emit(args) triggered current instance event?

Answer 1

Your div component doesn't have remove event. If you change to click event (v-on:click="testRemove"), you can see console log 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')
}
}
})
By default, Vue on support DOM events https://www.w3schools.com/jsref/dom_obj_event.asp
Updated
v-on:click="$emit(\'remove\')" will call this.$emit event. Here, this will be todo-item2 component. It only emit event to parent of todo-item2