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
