vue3父组件调用子组件的弹窗打开

在 Vue 3 中，父组件可以通过 `ref` 直接调用子组件的方法来打开弹窗。这种做法利用了 Composition API 提供的 `defineExpose` 来暴露子组件中的方法，使得父组件可以访问并执行这些方法。 ### 使用 `ref` 调用子组件弹窗方法 父组件通过定义一个与子组件同名的 `ref` 变量，并将其绑定到模板中的子组件上。当用户触发某个事件（如点击按钮）时，父组件可以直接调用该 `ref` 上的方法，从而控制子组件的行为，例如打开弹窗。 #### 父组件代码 ```vue <template> <div class="father"> <Son ref="Son" /> <button @click="fnCallChild">点我调用子组件方法</button> </div> </template> <script setup> import { ref } from 'vue'; import Son from '../components/Son.vue'; const Son = ref(); const fnCallChild = () => { Son.value.sonFn(); // 调用子组件的方法 }; </script> ``` #### 子组件代码 ```vue <template> <el-dialog v-model="dialogVisible" title="提示" width="50%"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </template> <script setup> import { ref } from 'vue'; const dialogVisible = ref(false); const sonFn = () => { dialogVisible.value = true; }; defineExpose({ sonFn }); </script> ``` 通过这种方式，父组件可以直接控制子组件内部的状态变化，例如打开或关闭弹窗[^2]。 ### 弹窗状态管理与通信 除了直接调用方法外，还可以通过 `props` 和 `emit` 的组合方式实现更灵活的父子通信。例如，父组件可以传递一个布尔值 `visible` 控制弹窗显示状态，同时监听子组件发出的 `close` 事件来更新状态。 #### 子组件代码 ```vue <template> <el-dialog :v-model="showDialog" title="添加课程" top="10vh" width="640px" @close="handleClose"> <!-- 弹窗内容 --> </el-dialog> </template> <script setup> import { ref, defineProps, defineEmits } from 'vue'; const props = defineProps({ visible: { type: Boolean, default: false } }); const emit = defineEmits(['update:visible', 'close']); const showDialog = ref(props.visible); const handleOpen = () => { showDialog.value = true; }; const handleClose = () => { emit('update:visible', false); emit('close'); }; defineExpose({ handleOpen, handleClose }); </script> ``` #### 父组件使用示例 ```vue <template> <div> <Child :ref="childRef" :visible="isModalVisible" @update:visible="val => isModalVisible = val" /> <button @click="openModal">打开弹窗</button> </div> </template> <script setup> import { ref } from 'vue'; import Child from './Child.vue'; const isModalVisible = ref(false); const childRef = ref(); const openModal = () => { childRef.value.handleOpen(); }; </script> ``` 上述方案结合了 `ref`、`props` 和 `emit`，实现了父子组件之间的双向通信和弹窗控制[^3]。 --- ###