现在 vue3 官网更新了新方法 defineModel() ,这就是最简单方便的方法了
<template>
<el-dialog
title="title"
v-model="visible"
width="480px"
:close-on-click-modal="false"
>
<span></span>
<template #footer>
<span>
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
const visible = defineModel()
</script>
<style lang="scss" scoped>
</style>
———————— 下面是以前的方法——————————
编辑弹窗:
<template>
<el-dialog v-model="visible" title="Tips" width="30%" >
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">Cancel</el-button>
<el-button type="primary" @click="visible = false">
Confirm
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const props = defineProps({
visible: Boolean,
})
const emits = defineEmits(['update:visible'])
const visible = computed({
get: () => {
return props.visible
},
set: val => emits('update:visible', val),
})
</script>
<style lang="scss" scoped></style>
父组件:
<el-button type="primary" @click="openDialog"></el-button>
<edit-dialog v-model:visible="dialogVisible"></edit-dialog>
const openDialog = () =>{
dialogVisible.value = true
}