vue3+element-plus Dialog对话框的使用 与 setup 写法的使用

一. 传统写法不使用setup语法糖

**方式一：通过

v-model

的方式实现子组件的显示与隐藏**

1. 父组件的内容

<template><div><el-button@click="open">打开</el-button><Childv-model:visible="flag"></Child></div></template><script>import{ ref, watch }from'vue'import Child from"../components/Child.vue"exportdefault{components:{
      Child
    },setup(){const flag =ref(false)constopen=()=>{
        flag.value =true}watch(()=> flag.value ,(val)=>{
        console.log("监听flag值得变化:", val)})return{
        flag,
        open
      }}}</script>

1. 子组件内容

<template><divclass="hello"><el-dialogtitle="提示"v-model="dialogVisble"width="30%":before-close="close"><span>这是一段信息</span><template#footer><spanclass="dialog-footer"><el-button@click="close">取 消</el-button><el-buttontype="primary"@click="confirm">确 定</el-button></span></template></el-dialog></div></template><script>import{ ref, watch }from'vue'exportdefault{props:{visible:{type: Boolean,default:false}},setup(props, ctx){const dialogVisble =ref(false)constclose=()=>{
        ctx.emit("update:visible",false);};constconfirm=()=>{
        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

的方式实现子组件的显示与隐藏**

1. 父组件的内容

<template><div><el-button@click="open">打开</el-button><Childref="visibleDialog"></Child></div></template><script>import{ ref }from'vue'import Child from"../components/Child.vue"exportdefault{components:{
      Child
    },setup(){const visibleDialog =ref(null)constopen=()=>{
        visibleDialog.value.dialogVisble =true}return{
        visibleDialog,
        open
      }}}</script>

1. 子组件内容

<template><divclass="hello"><el-dialogtitle="提示"v-model="dialogVisble"width="30%":before-close="close"><span>这是一段信息</span><template#footer><spanclass="dialog-footer"><el-button@click="close">取 消</el-button><el-buttontype="primary"@click="confirm">确 定</el-button></span></template></el-dialog></div></template><script>import{ ref }from'vue'exportdefault{setup(props, ctx){const dialogVisble =ref(false)constconfirm=()=>{
        console.log('你点击了确定按钮')
        dialogVisble.value =false}constclose=()=>{
        dialogVisble.value =false}return{
        dialogVisble,
        confirm,
        close
      }}}</script>

2.

setup

语法糖写法

1. 父组件

<template><Child:user="user"ref="visiableDialog"></Child><el-buttontype="primary"@click="openDialog">打开弹窗</el-button></template><scriptsetup>import{ reactive, ref }from'vue'import Child from"../components/childComponents.vue"const visiableDialog =ref(null)const user =reactive({name:'张三',age:20})functionopenDialog(){
  visiableDialog.value.dialogVisble =true
  console.log(visiableDialog.value.dialogVisble);}</script>

1. 子组件

<template><divclass="hello">{{ `${props.user.name}在学习VUE3` }}</div><el-dialogtitle="提示"v-model="dialogVisble"width="30%"><span>这是一段信息</span><template#footer><spanclass="dialog-footer"><el-button@click="close">取 消</el-button><el-buttontype="primary"@click="confirm">确 定</el-button></span></template></el-dialog></template><scriptsetup>import{ ref }from'vue';import{ ElMessageBox }from'element-plus'// 定义控制弹窗显隐的变量const dialogVisble =ref(false)// 接受父组件传过来的值// const props = defineProps({//   user: {//     type: Object,//     default: {}//   }// })// 或者const props =defineProps(['user'])functionconfirm(){
  ElMessageBox.confirm('确定关闭吗?').then(()=>{
    console.log('你点击了确定按钮')
    dialogVisble.value =false}).catch(()=>{})}functionclose(){
  dialogVisble.value =false}// 将变量暴露出来defineExpose({
  dialogVisble
})</script>

总结：

• 对于传统写法两种方式来看，都有各自的优缺点，方式一在写法上虽然麻烦了些，但是符合vue的设计原则，尽量少的操作Dom，以操作数据的方式达到了预期的目的。
• 而方式二看起来趋向于我们在vue2中的写法，虽然在写法上简便，但是在原理上则是操作了Dom，总之，两种方式都可以达到我们想要的结果，至于使用那种方式看个人编写代码的习惯吧。
• 对于使用setup语法糖写法来看，代码整体比较整洁，写起来也相对方便快捷