这篇文章主要介绍“vue3+element-plus Dialog对话框的使用与setup写法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3+element-plus Dialog对话框的使用与setup写法是什么”文章能帮助大家解决问题。
方式一:通过v-model
的方式实现子组件的显示与隐藏
父组件的内容
<template>
<div>
<el-button @click="open">打开</el-button>
<Child v-model:visible="flag" ></Child>
</div>
</template>
<script>
import { ref, watch } from 'vue'
import Child from "../components/Child.vue"
export default {
components: {
Child
},
setup() {
const flag = ref(false)
const open = () => {
flag.value = true
}
watch(() => flag.value , (val) => {
console.log("监听flag值得变化:", val)
})
return {
flag,
open
}
}
}
</script>
子组件内容
<template>
<div class="hello">
<el-dialog title="提示" v-model="dialogVisble" width="30%" :before-close="close">
<span>这是一段信息</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
setup(props, ctx) {
const dialogVisble = ref(false)
const close = () => {
ctx.emit("update:visible", false);
};
const confirm = () => {
console.log('你点击了确定按钮')
ctx.emit("update:visible", false);
}
watch(() => props.visible, (val) => {
console.log(props.visible, val);
dialogVisble.value = val
});
return {
dialogVisble,
confirm,
close
}
}
}
</script>
方式二:通过为元素绑定ref
的方式实现子组件的显示与隐藏
父组件的内容
<template>
<div>
<el-button @click="open">打开</el-button>
<Child ref="visibleDialog"></Child>
</div>
</template>
<script>
import { ref } from 'vue'
import Child from "../components/Child.vue"
export default {
components: {
Child
},
setup() {
const visibleDialog = ref(null)
const open = () => {
visibleDialog.value.dialogVisble = true
}
return {
visibleDialog,
open
}
}
}
</script>
子组件内容
<template>
<div class="hello">
<el-dialog title="提示" v-model="dialogVisble" width="30%" :before-close="close">
<span>这是一段信息</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup(props, ctx) {
const dialogVisble = ref(false)
const confirm = () => {
console.log('你点击了确定按钮')
dialogVisble.value = false
}
const close = () => {
dialogVisble.value = false
}
return {
dialogVisble,
confirm,
close
}
}
}
</script>
2. setup
语法糖写法 父组件
<template>
<Child :user="user" ref="visiableDialog"></Child>
<el-button type="primary" @click="openDialog">打开弹窗</el-button>
</template>
<script setup>
import { reactive, ref } from 'vue'
import Child from "../components/childComponents.vue"
const visiableDialog = ref(null)
const user = reactive({
name: '张三',
age: 20
})
function openDialog() {
visiableDialog.value.dialogVisble = true
console.log(visiableDialog.value.dialogVisble);
}
</script>
子组件
<template>
<div class="hello">{{ `${props.user.name}在学习VUE3` }}</div>
<el-dialog title="提示" v-model="dialogVisble" width="30%">
<span>这是一段信息</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus'
// 定义控制弹窗显隐的变量
const dialogVisble = ref(false)
// 接受父组件传过来的值
// const props = defineProps({
// user: {
// type: Object,
// default: {}
// }
// })
// 或者
const props = defineProps(['user'])
function confirm() {
ElMessageBox.confirm('确定关闭吗?').then(() => {
console.log('你点击了确定按钮')
dialogVisble.value = false
}).catch(() => { })
}
function close() {
dialogVisble.value = false
}
// 将变量暴露出来
defineExpose({
dialogVisble
})
</script>
关于“vue3+element-plus Dialog对话框的使用与setup写法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/bigpatten/article/details/125893236