vue中封装一个弹窗

vue3

父元素

<template>
<div class="app">
   <some-modal v-model:visible="modalVisible" />
</div>
</template>
<script setup>
  import { ref } from "vue";
  import SomeModal from "@/components/some-modal.vue";
  
  const modalVisible = ref(false);
  setTimeout(()=>{ // 1秒之后打开弹窗
    modalVisible.value = true;
  },1000)
</script>

自组件（封装的弹窗组件）

<template>
  <el-dialog title="xx弹窗" v-model:visible="dialogShow">
      <button @click="close()">关闭弹窗</button>
  </el-dialog>
</template>
<script setup>
import { defineProps, defineEmits, computed } from "vue";

const props = defineProps(["visible"]);
const emit = defineEmits(["update:visible"]);
const dialogShow = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val),
});

const close = ()=>{
    dialogShow.value = false;
}
</script>

vue2

vue2基本一致，出了将模版中的 v-model:xxx 改为:xxx.sync