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

代码简单说

发布于 2026-06-16 14:16:23

1420

文章被收录于专栏：代码简单说代码简单说

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

自定义事件：如何在 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', {  
  model: {    
    prop: 'checked',    
    event: 'change'  
  },  
  props: {    
    checked: Boolean  
  },  
  template: `    
    <input      
      type="checkbox"      
      v-bind:checked="checked"      
      v-on:change="$emit('change', $event.target.checked)"    
    >  
  `
})

当你使用 v-model 时：

<base-checkbox v-model="lovingVue"></base-checkbox>

这时，lovingVue 会绑定到 checked prop，且当 base-checkbox 触发 change 事件时，lovingVue 的值会更新。

将原生事件绑定到组件

如果你需要在组件的根元素上直接监听原生事件，可以使用 .native 修饰符：

<base-input v-on:focus.native="onFocus"></base-input>

然而，如果组件的根元素被重构（例如改成 <label> 元素），.native 修饰符就无法正常工作。为了避免这种问题，你可以使用 $listeners，它能包含所有传递给组件的事件监听器。

Vue.component('base-input', {  
  inheritAttrs: false,  
  props: ['label', 'value'],  
  computed: {    
    inputListeners: function () {      
      var vm = this;      
      return Object.assign({},        
        this.$listeners,        
        {          
          input: function (event) {            
            vm.$emit('input', event.target.value);          
          }        
        }      
      );    
    }  
  },  
  template: `    
    <label>      
      {{ label }}      
      <input        
        v-bind="$attrs"        
        v-bind:value="value"        
        v-on="inputListeners"      
      >    
    </label>  
  `
});

通过这种方式，<base-input> 组件变得完全透明，和原生 <input> 元素一样工作。

.sync 修饰符：实现双向绑定

2.3.0+ 新增

在某些场景下，我们需要实现类似双向绑定的功能。Vue 提供了 .sync 修饰符来简化这个过程。比如，在一个组件中，假设你有一个 title prop，父组件希望更新它时，可以通过 update:title 事件来触发：

this.$emit('update:title', newTitle)

父组件可以通过监听该事件来更新 title：

<text-document  v-bind:title="doc.title"  v-on:update:title="doc.title = $event"></text-document>

为简化这一过程，Vue 提供了 .sync 修饰符：

<text-document v-bind:title.sync="doc.title"></text-document>

.sync 修饰符让你能够方便地双向绑定多个 props：

<text-document v-bind.sync="doc"></text-document>

但需要注意的是，.sync 修饰符不能与表达式一起使用（例如 v-bind:title.sync="doc.title + '!' "）。

总结

通过这篇文章的学习，相信你对 Vue 中自定义事件的使用有了更深入的理解。从事件名的大小写问题到 v-model 和 .sync 修饰符的巧妙应用，相信这些技巧能帮你在实际开发中更加高效、灵活地使用 Vue。希望这篇文章对你有所帮助！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-06-15，如有侵权请联系 cloudcommunity@tencent.com 删除

开发

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度