位置: IT常识 - 正文

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

编辑:rootadmin
vue3+element-plus Dialog对话框的使用 与 setup 写法的使用 一. 传统写法不使用setup语法糖

推荐整理分享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>

总结:

对于传统写法两种方式来看,都有各自的优缺点,方式一在写法上虽然麻烦了些,但是符合vue的设计原则,尽量少的操作Dom,以操作数据的方式达到了预期的目的。而方式二看起来趋向于我们在vue2中的写法,虽然在写法上简便,但是在原理上则是操作了Dom,总之,两种方式都可以达到我们想要的结果,至于使用那种方式看个人编写代码的习惯吧。对于使用setup语法糖写法来看,代码整体比较整洁,写起来也相对方便快捷
本文链接地址:https://www.jiuchutong.com/zhishi/287306.html 转载请保留说明!

上一篇:vue2项目之swiper.js 的使用(vue中使用swiper6)

下一篇:[ 基础漏洞篇 ] webpack 前端源码泄露详解(漏洞 标准)

  • 工程类预交税金
  • 城建税的税目是哪些
  • 其他应付款不用付了会计分录
  • 提取的应交增值税怎么算
  • 小规模残疾人交多少税收
  • 冲红票需要给购方吗
  • 已认证未抵扣的进项怎么填写
  • 金蝶财务软件固定资产怎样计提折旧
  • 企业购车支付购置税流程
  • 发票一定要填数量吗
  • 增值税简易计税账务处理
  • 企业捐赠不动产 会计分录
  • 应付税费包括
  • 工程施工的保障措施
  • 企业销售商品的业务有什么特点
  • 这个月没有进项开了发票可怎么办
  • 做天猫合理避税吗
  • 营改增前的工程款现在怎么开票
  • 单位参加城镇职工基本养老保险基数怎么填
  • 预缴所得税会计分录怎么做
  • 公司内部银行往来款会计分录
  • 收入是零招待费怎么汇算
  • 电力发票没有到怎么做分录
  • 收到采购折扣的账务处理
  • 小规模纳税人缴纳增值税怎么做账
  • 工厂电线
  • PHP:oci_lob_copy()的用法_Oracle函数
  • 支付人工费会计科目
  • php tr td
  • 股份支付的成本费用可否税前扣除?
  • firefox有什么用
  • 最小巧的单反相机
  • 工伤个人承担的费用
  • 税收筹划的风险性
  • 不动产售后回租如何处理
  • vue3 global
  • 前端报405错误
  • 单目测距精度
  • vue预览word加水印
  • php比较大小的函数
  • 固定资产包括无形资产吗?
  • scrapy csdn
  • 在建工程怎么做账务处理
  • 财务报表怎么重新编制
  • 企业其他应收款包括哪些
  • 视同销售的情况是?
  • 债券投资包含哪些
  • 待抵扣进项税额转出会计分录
  • 资金过账属于洗钱吗
  • 农民专业合作社法
  • 软件购买商城
  • 工资计提多了冲账怎么办
  • 长期待摊费用的最新账务处理
  • 分期付款购车需要什么
  • 新成立公司会计要做哪些事情
  • 公司购买垃圾袋可以抵扣吗
  • 租用的办公室装修费用怎么入账
  • 发票盖章需要知道的10个问题
  • 税法规定固定资产最低折旧年限
  • mysql查询语句大全讲解
  • 域怎么改名
  • linux命令sed -i
  • linux怎么和window系统共用
  • win7使用率
  • 怎么在手机上买股票开户
  • Linux系统中下载文件的wget命令操作实例
  • 什么是馥芮白
  • js判断输入用户名是否正确
  • node.js常用命令
  • Android UI之FrameLayout(帧布局)
  • html加载条代码
  • python读写docx
  • java教程 视
  • Python对象转列表
  • Python线程进程协程
  • jquery获取值的几种方法
  • 中奖个人所得税扣除标准
  • 如何查询自己电子邮件地址
  • 小规模纳税人销售自己使用过固定资产
  • 个体如何申请税收优惠
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设