vue实现dialog窗口（vue3+element-plus Dialog对话框的使用 与 setup 写法的使用）

一. 传统写法不使用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>

总结：

对于传统写法两种方式来看 
  
  
  
  
  
  
  ，都有各自的优缺点 
  
  
  
  
  
  
  
，方式一在写法上虽然麻烦了些

 


 


 


 


 


 


 

，但是符合vue的设计原则 
 
 
 
 
 
 
 ，尽量少的操作Dom 
   
   
   
   
   
   
   
，以操作数据的方式达到了预期的目的 
  
  
  
  
  
  
  。 而方式二看起来趋向于我们在vue2中的写法
 

 

 

 

 

 

 
，虽然在写法上简便
 

 

 

 

 

 

 

 ，但是在原理上则是操作了Dom              ，总之 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，两种方式都可以达到我们想要的结果














，至于使用那种方式看个人编写代码的习惯吧 
  
  
  
  
  
  
  
。 对于使用setup语法糖写法来看                      ，代码整体比较整洁 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，写起来也相对方便快捷