Например, почему событие удаления div недействительно?

Question

Я хочу изучить 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 = ''
    }
  }
})

Я обнаружил, что нажатие кнопки вызывает удаление метки li, поэтому я знаю, что триггер li запускается. Но я не понимаю, почему не происходит событие div'dmove. Кто может сказать мой $ 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 при поддержке DOM events https://www.w3schools.com/jsref/dom_obj_event.asp

Обновлено

v-on:click="$emit(\'remove\')" вызовет это событие. $ Emit. Здесь это будет todo-item2 компонент. Выдает событие только родителю todo-item2