主要是父给子传值
父组件
......
</div>
<!-- 弹窗复用: -->
<generalMirrorDialog ref="generalMirrorDialogRef"></generalMirrorDialog>
</template>
<js----->
let generalMirrorDialogRef = ref(null)
//某个确认函数回调
function confirm(){
generalMirrorDialogRef.value.visible = true;
generalMirrorDialogRef.value.deleteMessage = 'test';
}
子组件
<template>
<div class="confirmDialog-wrapper">
<el-dialog class="confirmDialog" v-model="visible" :destroy-on-close="true" :close-on-click-modal="false"
:lock-scroll="false" :show-close="false" @close="() => (visible = false)">
<div class="title">是否删除管理员<span>{{deleteMessage}}</span></div>
<template v-slot:footer>
<div class="dialog-footer">
<el-button @click="() => (visible = false)" class="btn-white">取消</el-button>
<el-button type="primary" class="btn-blue">确认</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref, defineExpose, defineEmits } from 'vue'
const visible = ref(false) //控制弹窗的显示与隐藏
const deleteMessage = ref('') //删除的具体管理员名称
defineExpose({ visible, deleteMessage }) //对外暴露,这样父组件操作这些值的时候,子组件页面能随之变化,做出响应
总结:
子组件通过defineExpose对外暴露某些值,父组件通过ref控制这些值,实现父给子传值