【Vue】sync修饰符

文章目录

  • 一、介绍
  • 二、语法
  • 三、代码示例

一、介绍

作用:可以实现 子组件父组件数据双向绑定,简化代码

简单理解:子组件可以修改父组件传过来的props值

特点:prop属性名,可以自定义,非固定为value

但是.sync没有v-model方便,所以当属性名确定为value,即表单元素的时候,就使用v-model

**场景 ** 封装弹框类的基础组件, visible属性 true显示 false隐藏

本质 .sync修饰符 就是 :属性名@update:属性名 合写


二、语法

父组件

// .sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
// 完整写法
<BaseDialog :visible="isShow" @update:visible="isShow = $event" 
/>

子组件

props: {visible: Boolean
},this.$emit('update:visible', false)

三、代码示例

App.vue

<template><div class="app"><button @click="openDialog">退出按钮</button><!-- isShow.sync  => :isShow="isShow" @update:isShow="isShow=$event" --><BaseDialog :isShow.sync="isShow"></BaseDialog></div>
</template><script>
import BaseDialog from './components/BaseDialog.vue'
export default {data() {return {isShow: false,}},methods: {openDialog() {this.isShow = true// console.log(document.querySelectorAll('.box')); },},components: {BaseDialog,},
}
</script><style>
</style>

BaseDialog.vue

<template><div class="base-dialog-wrap" v-show="isShow"><div class="base-dialog"><div class="title"><h3>温馨提示:</h3><button class="close" @click="closeDialog">x</button></div><div class="content"><p>你确认要退出本系统么?</p></div><div class="footer"><button>确认</button><button>取消</button></div></div></div>
</template><script>
export default {props: {isShow: Boolean,},methods:{closeDialog(){this.$emit('update:isShow',false)}}
}
</script><style scoped>
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何安装 CleanMyMac X 4.15.3破解版

CleanMyMac X 4.15.3破解版是一款专业的Mac系统清理软件&#xff0c;可一键智能扫描清理mac系统日志缓存磁盘垃圾和多余语言安装包&#xff0c;快速释放电脑内存&#xff0c;轻松管理和升级Mac上的应用。同时CleanMyMac X 破解版可以强力卸载恶意软件&#xff0c;修复系统漏洞&…

仿今日头条的新闻资讯系统

软件简介 新闻资讯系统&#xff0c;前端基于 Uniapp、Uview&#xff0c;后端基于Ruoyi系统&#xff0c;代码易读易懂、界面简洁美观。一套前端代码&#xff0c;同时支持微信小程序、Android、Ios应用等多种应用。 平台简介 新闻资讯系统&#xff0c;主要包括首页、行业资讯、…

Adobe Illustrator 矢量图设计软件下载安装,Illustrator 轻松创建各种矢量图形

Adobe Illustrator&#xff0c;它不仅仅是一个简单的图形编辑工具&#xff0c;更是一个拥有丰富功能和强大性能的设计利器。 在这款软件中&#xff0c;用户可以通过各种精心设计的工具&#xff0c;轻松创建和编辑基于矢量路径的图形文件。这些矢量图形不仅具有高度的可编辑性&a…

高中数学:数列-基础概念

一、什么是数列&#xff1f; 一般地&#xff0c;我们把按照确定的顺序排列的一列数称为数列&#xff0c;数列中的每一个数叫做这个数列的项&#xff0c;数列的第一项称为首项。 项数有限个的数列叫做有穷数列&#xff0c;项数无限个的数列叫做无穷数列。 二、一般形式 数列和…

Ubuntu20.04-SLAM软件安装

目录 安装环境安装问题1.Ubuntu20.04在T440p上的安装问题1.1 安装后提示"x86/cpu:VMX(outside TXT) disabled by BIOS"1.2 ACPI Error:Needed type[Reference],found [Integer] 等错误1.3 ima: Error Communicating to TPM chip 2.中文输入法-google pinyin3. gcc/cm…

计算机二级Access操作题总结——简单应用

查询设计 创建一个查询&#xff0c;能够在客人每次结账时根据客人的姓名提示统计这个客人已住天数和应交金额&#xff0c;并显示“姓名”、“房间号”、“已住天数”和“应交金额”&#xff0c;所建查询命名为“qT2”。 注&#xff1a;输入姓名时应提示“请输入姓名”。已住天…

SpringBoot: 可执行jar的特殊逻辑

这一篇我们来看看Java代码怎么操作zip文件(jar文件)&#xff0c;然后SpringBoot的特殊处理&#xff0c;文章分为2部分 Zip API解释&#xff0c;看看我们工具箱里有哪些工具能用SpringBoot的特殊处理&#xff0c;看看SpringBoot Jar和普通Jar的不同 1. Zip API解释 1. ZipFil…

深度学习论文: Emerging Properties in Self-Supervised Vision Transformers

深度学习论文: Emerging Properties in Self-Supervised Vision Transformers Emerging Properties in Self-Supervised Vision Transformers PDF: https://arxiv.org/pdf/2104.14294v1 PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTorch代码: https://githu…

Composition API函数

unref unref函数用于获取响应式对象的原始值。如果传入的是一个响应式对象&#xff0c;则返回其value属性&#xff1b;如果传入的是一个普通的JavaScript对象&#xff0c;则返回它本身。 unref函数在某些情况下很有用&#xff0c;例如在使用watchEffect函数时&#xff0c;可…

go语言实战--基于Vue3+gin框架的实战Cetide网项目(讲解开发过程中的各种踩坑)

最近被要求学习go语言开发&#xff0c;也就做一个项目实战巩固一下&#xff0c;也分享一下关于gin框架的实战项目 &#xff08;后续应该还是会继续学习Java&#xff0c;这一期还是做一个govue的&#xff09; 经过一段时间的开发过后&#xff0c;感觉现在的开发效率要快不少了&…

传统工科硕士想转嵌入式,时间够吗?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 零基础开始学&#xff0…

[NOVATEK] NT96580行车记录仪功能学习笔记(持续更新~

一、u-Boot升级灯 运行u-Boot程序时LED灯闪烁,找到运行过程中一直在运行的函数在里面进行LED引脚电平的翻转 宏定义 Z:\SunFan\AHD580\pip\na51055_PIP\BSP\u-boot\include\configs\nvt-na51055-evb.h Z:\SunFan\AHD580\pip\na51055_PIP\BSP\u-boot\drivers\mtd\nvt_flash_…

什么是JWT(Json-Web-Token)?JWT的用途和优势是什么?

什么是JWT&#xff08;Json-Web-Token&#xff09;&#xff1f; JWT&#xff0c;全称JSON Web Token&#xff0c;是一种开放标准&#xff08;RFC 7519&#xff09;。它定义了一种紧凑的、自包含的方式&#xff0c;用于在各方之间安全地传输信息。这种信息被设计成JSON对象格式…

简介RESTful API和中间件Web API网关

从RESTful API开始 RESTful API(Representational State Transfer API)是一种设计Web服务的架构风格,它基于REST(Representational State Transfer)理论。REST是一种软件架构风格,由Roy Fielding在其博士论文《Architectural Styles and the Design of Network-based So…

LeetCode 550, 380, 234

目录 550. 游戏玩法分析 IV题目链接表要求知识点思路代码 380. O(1) 时间插入、删除和获取随机元素题目链接标签思路代码 234. 回文链表题目链接标签思路代码 550. 游戏玩法分析 IV 题目链接 550. 游戏玩法分析 IV 表 表Activity的字段为player_id&#xff0c;device_id&am…

Linux卸载残留MySQL【带图文命令巨详细】

Linux卸载残留MySQL 1、检查残留mysql2、检查并删除残留mysql依赖3、检查是否自带mariadb库 1、检查残留mysql 如果残留mysql组件&#xff0c;使用命令 rpm -e --nodeps 残留组件名 按顺序进行移除操作 #检查系统是否残留过mysql rpm -qa | grep mysql2、检查并删除残留mysql…

k8s——Pod容器中的存储方式及PV、PVC

一、Pod容器中的存储方式 需要存储方式前提&#xff1a;容器磁盘上的文件的生命周期是短暂的&#xff0c;这就使得在容器中运行重要应用时会出现一些问题。 首先&#xff0c;当容器崩溃时&#xff0c;kubelet 会重启它&#xff0c;但是容器中的文件将丢失——容器以干净的状态&…

TensorRT 精度debug分析工具

tensorRT还提供了一套可用于engine生成过程中debug的工具&#xff0c;包括Polygraphy、ONNX GraphSurgeon和PyTorch-Quantization。这些小工具用处很大&#xff0c;值得花时间进一步研究。 Debug方法示例 polygraphy Polygraphy是TensorRT官方提供的一系列小工具合集&#x…

spring源码解析-(1)关于Bean

什么是Bean&#xff1f; 是spring对所有注入到IoC容器中的类的统称。 我们要注册进入spirng的bean千奇百怪&#xff0c;所以spring必须需要使用一个统一的定义来标识bean&#xff0c;就有了接下来的BeandDefinition&#xff0c;通过名称我们就可以知道&#xff0c;他是对bean…

美国演员工会SAG-AFTRA 要求人工智能在广告中使用演员声音需征得同意并付费

SAG-AFTRA 的新豁免允许在人工智能生成的广告中使用演员的声音&#xff0c;但需要同意、补偿和安全措施 美国演员工会&#xff08;SAG-AFTRA&#xff09;推出了一项新的豁免&#xff0c;以保护会员免受未经授权的人工智能在广告中使用其声音的影响。动态人工智能音频广告豁免定…