Vue中div的remove事件无效原因及$emit('remove')作用咨询

一、$emit('remove')的含义 #

在Vue的组件通信逻辑里，$emit是子组件向父组件传递消息的核心工具。当你在子组件模板里写$emit('remove')，或者在方法里写this.$emit('remove')，本质是子组件主动向外（父组件）触发一个名为remove的自定义事件，相当于给父组件发了一个“我要执行remove操作”的信号。

父组件通过v-on:remove="具体逻辑"（也可以简写为@remove="具体逻辑"）来监听这个自定义事件，一旦接收到子组件发来的信号，就会执行对应的处理代码。比如你的代码里，父组件的<todo-item2>标签上绑定了v-on:remove="todos.splice(index, 1)"，所以当子组件触发remove事件时，父组件就会执行数组删除操作——这也是你点击按钮能移除<li>的原因。

二、为什么div上的remove事件未触发？ #

你在子组件的<div>上绑定了v-on:remove="testRemove"，但这里的remove是自定义事件，并非click、mouseover这类浏览器原生DOM事件。Vue不会自动触发元素上的自定义事件，必须通过代码主动触发才行。

你的按钮点击时只调用了$emit('remove')，这个$emit是向父组件发送事件信号，并不会触发子组件内部<div>元素上的remove自定义事件，所以testRemove方法自然不会被执行。

怎么修改才能触发testRemove？ #

给你两种简单的调整方案：

1. 按钮点击时先执行testRemove，再触发父组件事件
   修改子组件模板里的按钮点击逻辑：

   <button v-on:click="testRemove; $emit('remove')">X</button>
   

   这样点击按钮时，会先调用testRemove方法（控制台会打印div remove event trigger），然后再向父组件发送remove事件执行删除操作。

2. 在testRemove方法内部触发父组件事件
   修改子组件的testRemove方法：

   testRemove: function () {
     console.log('div remove event trigger')
     this.$emit('remove') // 在这里添加向父组件发送事件的逻辑
   }
   

   然后按钮的点击事件直接绑定testRemove：

   <button v-on:click="testRemove">X</button>
   

   这样点击按钮调用testRemove时，既会打印日志，又会触发父组件的删除逻辑。

另外，你原来在<div>上绑定的v-on:remove="testRemove"其实是多余的，因为没有场景会在这个<div>上触发remove自定义事件，完全可以去掉哦～

内容的提问来源于stack exchange，提问作者study_20160808