网线制作公开课_阿里建站平台官网_网站推广网站_营销型网页设计

vue中为什么在实现双向绑定时，emit 事件名要加 update: 前缀

1. v-model

1. 在 Vue 中，v-model 是一个语法糖，它实际上做了两件事：
   • 把一个值绑定到组件/元素上
   • 监听这个值的变化事件
2. 当我们使用 v-model 时：

//父组件
...
<BusDevDetail v-model:isDetailDrawerShow="isDetailDrawerShow" />
...

等价于

//父组件
...
<BusDevDetail :isDetailDrawerShow="isDetailDrawerShow"@update:isDetailDrawerShow="isDetailDrawerShow = $event"
/>
...

3. 所以在子组件中：

const emit = defineEmits(["update:isDetailDrawerShow"]);

• update: 前缀表明这是一个更新属性的事件
• isDetailDrawerShow 是要更新的属性名
• 当子组件需要修改这个值时，会触发 emit("update:isDetailDrawerShow", newValue)
• 父组件监听到这个事件后，会更新 isDetailDrawerShow 的值

这就是为什么在实现双向绑定时，emit 事件名要加 update: 前缀的原因。这是 Vue 的约定，确保 v-model 能正确工作。