vue3组件通信:defineEmits和defineModel

140 阅读1分钟

defineEmits

  • 作用:用于声明组件可以触发的事件(即子组件向父组件通信)。
  • 通过 emit('eventName', payload) 触发事件,父组件可以通过 @eventName 监听。

2257fb41-6f3c-4229-a092-8f05ba600fcd.png

defineModel

简单传参

  • 在 Vue 3.3+ 中引入,替代传统的 props + emit 方式。
  • 直接绑定到组件的 v-model ,无需手动处理 props 和 emit 

c977e2cf-e043-4428-bfd4-6e2d321ea9dc.png

带名称的传参

2b5f290f-b37e-4939-82ec-944559cb5bc2.png

image.png

多个传参

image.png