个人技术分享

子组件:

<template>
 <el-dialog
    v-model="visible"
    title="Tips"
    width="500"
  >
  <div class="left">

  </div>
  <div class="right"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang='ts' setup>
import { onMounted, ref,computed } from 'vue'
const props = defineProps({
    dialogVisible: {
      type: Boolean,
      default: false
    }
})
const emit = defineEmits(['update:dialogVisible'])
onMounted(() => {
  console.log('组件执行了');
})
// 备注：这里一定要通过中间变量（代理方式），否则v-model绑定的值会报错
let visible = computed({
    get() {
      return props.dialogVisible
    },
    set(value: boolean) {
      console.log('value222',value);
      emit('update:dialogVisible', value)
    }
})
const close = ()=>{
 // 请关闭弹框
 visible.value = false;

}
const save = () => {
  visible.value = false;
}
</script>

父组件：

   <Son 
    v-model:dialogVisible="dialogVisible"
    @closeDialog="closeDialog"
    ></Son>

注意：这里一定要加v-model，千万不要漏掉了