vue弹窗关闭通过emits实现父子通信：子组件声明并触发close事件，父组件监听后更新状态；推荐用v-model语法糖，子组件emit('update:modelvalue', false)，父组件直接v-model绑定。
Vue 组件中通过 emits 实现弹窗关闭按钮的事件通知，核心是子组件（弹窗）主动触发一个自定义事件（如 close），父组件监听该事件并执行关闭逻辑（比如修改 v-model 或控制显示状态的 ref）。这符合 Vue 的“单向数据流”设计原则。
1. 子组件（弹窗）声明并触发 emits
在弹窗组件内部，需显式声明允许抛出的事件（推荐写法，增强类型安全和 IDE 提示），并在关闭按钮点击时调用 emit：
- 使用
defineEmits声明事件名（如close、confirm） - 绑定按钮的
@click，调用emit('close') - 若需传参（如关闭原因），可加第二个参数：
emit('close', 'cancel')
示例（子组件 Modal.vue）：
script setup>
const emit = defineEmits(['close', 'confirm'])
const handleClose = () => emit('close')
const handleConfirm = () => emit('confirm')
<template><div class="modal">
<div class="modal-content">
<slot></slot><button>关闭</button>
<button>确定</button>
</div>
</div>
</template>
2. 父组件监听事件并更新状态
父组件通过 @close 监听子组件发出的事件，并更新控制弹窗显示的响应式变量（通常为 ref 或 v-model 绑定的值）：
- 若用
v-model:show，直接监听@update:show或使用语法糖v-model - 若用普通 ref（如
isModalOpen），监听@close并设为false - 保持响应式同步，避免直接修改 prop
示例（父组件）：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章