![[Vue] 有时候你不需要 $emit & $on](https://ssshooter.com/og-image/2019-10-16-dont-need-emit-on.png)
[Vue] 有时候你不需要 $emit & $on
内容提要
Vue 中父组件向子组件传递事件通常用 $emit/$on，但作者在评论组件中需要将取消回复按钮放在输入框下方，且 CommentInput 会复用，只有此处需要该功能。作者改用 slot，将按钮嵌入子组件并直接调用父组件方法，免去事件传递和额外判断，同时解决复用问题。作者认为 slot 类似闭包，携带父组件上下文。
延伸解读
slot 如何替代事件传递
文章展示了用 slot 将父组件的按钮嵌入子组件，按钮直接调用父组件的 replyToggle 方法，从而避免使用 $emit 和 $on 进行事件传递。这种方式让子组件无需知道父组件的事件处理逻辑，减少了父子组件间的耦合，尤其适合子组件复用但只有特定场景需要额外功能的场景。
复用场景下的条件判断简化
CommentInput 组件会在多处复用，但只有评论列表中的回复场景需要“取消回复”按钮。如果使用 $emit/$on，需要在子组件中添加判断逻辑来区分场景。而通过 slot，父组件可以按需插入按钮，子组件保持通用，无需为特定场景增加条件分支，代码更简洁。
slot 与闭包的类比
作者将 slot 类比为闭包，认为 slot 携带了父组件的作用域和上下文，嵌入子组件后仍能访问父组件的方法和数据。这种类比有助于理解 slot 的能力：它不仅仅是内容分发，还能让父组件在子组件内部执行自己的逻辑，实现更灵活的组件组合。
Q&A
在 Vue 中，什么情况下可以不用 $emit 和 $on 来实现子组件向父组件传递事件？
当需要将父组件的按钮或操作嵌入子组件，并且该功能只在特定场景下使用时，可以使用 slot 替代 $emit 和 $on。通过 slot 将父组件的方法直接嵌入子组件，避免事件传递和额外判断。
Vue 的 slot 如何解决组件复用时的功能定制问题？
使用 slot 可以将父组件的特定内容（如按钮）嵌入子组件，这样只有使用该 slot 的地方才会显示这些内容，其他复用该子组件的地方不受影响，从而解决复用时的功能定制问题。
为什么说 Vue 的 slot 类似于闭包？
因为 slot 内容在父组件作用域中编译，可以访问父组件的数据和方法，就像闭包携带了父组件的上下文一样，嵌入到子组件中执行。
在评论组件中，如何将取消回复按钮放在输入框下方而不影响其他复用场景？
可以使用 slot 将取消回复按钮嵌入 CommentInput 组件内部，这样按钮会显示在输入框下方，并且只有当前使用 slot 的地方会显示该按钮，其他复用 CommentInput 的地方不会出现取消回复按钮。
使用 slot 替代 $emit 和 $on 有什么好处？
好处包括：免去编写 $emit 和 $on 的麻烦，避免在子组件中添加额外的条件判断，代码更简洁，同时解决组件复用时的功能定制问题。
在 Vue 中，父组件如何通过 slot 直接调用自己的方法？
父组件在子组件标签内使用 slot 内容时，可以直接在 slot 内容中绑定父组件的方法，例如在按钮上使用 @click="replyToggle(item)"，这样点击按钮时就会执行父组件的方法。
