【Vue.js进阶教程】第2章 自定义事件：如何在 Vue 中高效传递数据

欢迎关注 『开发必备』 专栏，专注于解决你在开发过程中遇到的各种问题，帮你快速找到解决方案，节省大量调试时间。内容持续更新中，保证每篇都值得收藏！

自定义事件：如何在 Vue 中高效传递数据

在 Vue 中，事件机制非常强大，可以帮助我们在组件之间传递信息。而自定义事件作为其中的一个关键部分，帮助我们实现组件之间的通信。今天就带你深入了解 Vue 中自定义事件的使用技巧！

事件名：为什么要严格匹配

和组件及 prop 不同，Vue 的自定义事件名不会自动转换大小写。你触发的事件名必须和监听器中设置的事件名完全匹配。举个简单的例子：

this.$emit('myEvent')

如果你用 kebab-case 监听该事件：

<!-- 没有效果 --><my-component v-on:my-event="doSomething"></my-component>

这样就没有效果，因为 Vue 不会自动将 myEvent 转换为 my-event，所以事件监听失败了。

为了避免这种问题，强烈建议使用 kebab-case 作为事件名。这样在 DOM 模板中使用时，Vue 会自动处理为小写，避免了大小写不一致的问题。

自定义组件的 v-model

2.2.0+ 新增

你可能已经习惯了 v-model，它在默认情况下绑定的是 value prop 和 input 事件。但是在一些特殊的输入组件中，value 属性的用途可能不同。此时，Vue 提供了一个解决方案，允许你自定义 prop 和事件的名称。

Vue.component('base-checkbox', {