vue3 ref实现父子组件传值

主要是父给子传值

父组件

......
  </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控制这些值，实现父给子传值