Vue2基础:.sync修饰符的使用,认识,作用,本质案例演示,实现父子之间的通信。

.sync的作用:

可以实现子组件与父组件数据的双向绑定,简化代码。

与v-model的不同点,prop属性名可以自定义,不要一定要用value.

.sync的本质:

就是:属性名和@update:属性名合写。

下面我们进行代码演示:

效果是什么呢?点击按钮,出现弹框。

2.完成点击叉号,弹框消失。

 

效果图:

在该例子中:

 :visible.sync => :visible + @update:visible

3.最后附上代码:

App.vue(父组件)

<template><div class="app"><button @click="isShow=!isShow">退出按钮</button><!-- 这里进行一个父传子 --><!-- :visible.sync => :visible + @update:visible --><BaseDialog :visible.sync="isShow"></BaseDialog></div>
</template><script>
import BaseDialog from "./components/BaseDialog.vue"
export default {data() {return {isShow:false}},methods: {},components: {BaseDialog,},
}
</script><style>
</style>

BaseDialog.vue(子组件)

<template><div class="base-dialog-wrap" v-show="visible"><div class="base-dialog"><div class="title"><h3>温馨提示:</h3><button @click="Close" class="close">x</button></div><div class="content"><p>你确认要退出本系统么?</p></div><div class="footer"><button>确认</button><button>取消</button></div></div></div>
</template><script>
export default {props:{visible:Boolean},methods:{Close(){this.$emit('update:visible',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/25502.shtml

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

相关文章

探索智慧景区票务系统的架构与应用

随着旅游业的迅速发展&#xff0c;智慧景区票务系统已经成为提升景区管理效率、优化游客体验的重要工具。智慧景区票务系统的架构设计与应用&#xff0c;将现代信息技术与景区管理相结合&#xff0c;为景区的门票销售、入园管理和游客服务提供了全新的解决方案。本文将深入探讨…

每天一个数据分析题(三百五十六)-图表决策树

图表决策树中将图表分成四类&#xff0c;分别是&#xff1f; A. 比较类 B. 序列类 C. 构成类 D. 描述类 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案

【西瓜书】9.聚类

聚类任务是无监督学习的一种用于分类等其他任务的前驱过程&#xff0c;作为数据清洗&#xff0c;基于聚类结果训练分类模型 1.聚类性能度量&#xff08;有效性指标&#xff09; 分类任务的性能度量有错误率、精度、准确率P、召回率R、F1度量(P-R的调和平均)、TPR、FPR、AUC回归…

滑动窗口算法:巧妙玩转数据的窗外世界

✨✨✨学习的道路很枯燥&#xff0c;希望我们能并肩走下来! 文章目录 目录 文章目录 前言 一 滑动窗口是什么&#xff1f; 二 相关题目解析 1. 长度最小的子数组 &#x1f973;题目解析 &#x1f973;算法原理 ✏️思路1 暴力枚举出所有子数组之和 ✏️思路2 滑动窗…

docker-compose部署mysql+nginx+redis

docker部署 参考&#xff1a; docker部署mysqlnginxredis docker-compose部署mysqlnginxredis mysql 1、创建docker-compose-mysql.yml version: "3" services:mysql:image: mysql:5.7restart: alwayscontainer_name: mysqlports:- 3306:3306volumes:- /home/my…

LangChain开发【NL2SQL】应用

前言 关于LangGraph的简单介绍&#xff0c;请参考这篇博客&#xff1a; LangGraph开发Agent智能体应用【基础聊天机器人】-CSDN博客 对比LangChain实现NL2SQL 关于用LangChain开发NL2SQL的Agent应用&#xff0c;在这篇博客提供了完整的代码实现&#xff1a; LangChain开发…

AI网络爬虫:批量爬取豆瓣图书搜索结果

工作任务&#xff1a;爬取豆瓣图书搜索结果页面的全部图书信息 在ChatGPT中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个爬虫Python脚本编写的任务&#xff0c;具体步骤如下&#xff1a; 用 fake-useragent库设置随机的请求头&#xff1b; 设置chr…

深拷贝浅拷贝解析,从原理理解深拷贝

这块应该都有过比较深刻的了解了。今天加深下印象和查漏补缺下。 浅拷贝&#xff1a; let original { a: 1, b: { c: 2 } };//这边定一个obj&#xff0c;来供拷贝 let shallowCopy Object.assign({}, original);// let shallowCopy { ...original }; 创建一个浅拷贝对象拷贝…

NFT 智能合约实战-快速开始(1)NFT发展历史 | NFT合约标准(ERC-721、ERC-1155和ERC-998)介绍

文章目录 NFT 智能合约实战-快速开始(1)NFT发展历史国内NFT市场国内NFT合规性如何获得NFT?如何查询NFT信息?在 OpenSea 上查看我们的 NFT什么是ERC721NFT合约标准ERC-721、ERC-1155和ERC-998 对比ERC721IERC721.sol 接口内容关于合约需要接收 ERC721 资产 onERC721Received…

Nginx面试题精选及参考答案(3万字长文)

目录 什么是Nginx,它主要用于哪些场景? Nginx和Apache有什么区别? 描述一下Nginx的事件驱动模型。 Nginx如何处理静态文件和动态请求? 什么是反向代理,Nginx如何实现反向代理? 如何在Linux系统中安装Nginx? Nginx的主要配置文件有哪些? 如何修改Nginx的配置以实…

软考初级网络管理员_01_计算机系统基础知识(硬件)单选题

1.在字长为16位、32位、62位或128位的计算机中&#xff0c;字长为()位的计算机数据运算精度最高。 16 32 64 128 2.8位、16位、32位和64位字长的计算机中&#xff0c;()位字长计算机的数据运算精度最高。 9 8 16 64 3.声卡的性能指标主要包括-和采样位数:在采样位数分…

如何随机化列表中的元素?

一、技术难点 在Python中&#xff0c;随机化列表中的元素通常指的是对列表进行洗牌&#xff08;shuffle&#xff09;操作&#xff0c;即在不改变列表中元素数量的前提下&#xff0c;随机改变元素的顺序。这个过程看似简单&#xff0c;但在实际实现中需要考虑一些技术细节和难点…

插入排序(Insertion_sort)

最简单的一种排序 基本思想就是从第一个元素开始&#xff0c;每次排列一个元素&#xff0c;一直排列到结尾 例如&#xff1a; 3 1 4 5 7 2 6 第一个元素不用排序&#xff0c;从第二个开始 因为3 > 1所以直接将3覆盖到1上 3 3 4 5 7 2 6 而1用一个变量先…

【CMake】install用法

以前一直不清楚install的具体作用&#xff0c;现在明白了&#xff0c;其实就是把你的文件&#xff08;生成的二进制&#xff0c;源代码或者任意&#xff09;给复制&#xff08;也可以说安装&#xff09;到指定路径。 将二进制安装到Bin文件夹 比如我生成了一个test程序&#…

【教学类-64-02】20240610色块眼力挑战(二)-2-25宫格色差10-100(10倍)(星火讯飞)

背景需求 以下的色块眼里挑战需要人工筛选图片&#xff0c;非常繁琐。 【教学类-64-01】20240607色块眼力挑战&#xff08;一&#xff09;-0-255随机底色-CSDN博客文章浏览阅读446次&#xff0c;点赞12次&#xff0c;收藏5次。【教学类-64-01】20240607色块眼力挑战&#xff…

Linux安装Docker | 使用国内镜像

环境 CentOS7 先确认能够上网 curl www.baidu.com返回该输出说明网络OK 步骤一&#xff1a;安装gcc 和 gcc-c yum -y install gccyum -y install gcc-c步骤二&#xff1a;安装Docker仓库 yum install -y yum-utils接下来配置yum的国内镜像 yum-config-manager --add-re…

tomcat服务器之maxHttpHeaderSize

背景&#xff1a;在OA流程表单中&#xff0c;填写了200条数据&#xff0c;一提交&#xff0c;秒报400错误&#xff0c;且请求没有打到后端中&#xff08;无报错日志&#xff09;&#xff0c;一开始以为是谷歌浏览器的问题&#xff0c;可百度上关于这个错误的解决方案都是清除缓…

转让北京劳务分包地基基础施工资质条件和流程

地基基础资质转让流程是怎样的?对于企业来说&#xff0c;资质证书不仅是实力的证明&#xff0c;更是获得工程承包的前提。而在有了资质证书后&#xff0c;企业才可以安心的准备工程投标&#xff0c;进而在工程竣工后获得收益。而对于从事地基基础工程施工的企业&#xff0c;需…

5、Spring之Bean生命周期~创建Bean(1)

5、Spring之Bean生命周期~创建Bean 创建BeanresolveBeanClass()方法doResolveBeanClass()方法 resolveBeforeInstantiation()方法 创建Bean Spring Bean的生命周期首先会经过扫描&#xff0c;然后回经过合并&#xff0c;合并之后就会通过getBean()方法去获取bean&#xff0c;ge…

特种设备起重机指挥题库附答案

1、【多选题】力的三要素是指:( )。(ACD) A、力的大小 B、力的单位 C、力的方向 D、力的作用点 2、【多选题】司索作业规范正确的要求是( )(ABC) A、吊点正确 B、吊索挂设合理 C、绑扎牢靠 D、吊索长短一致 3、【多选题】圆柱形物体兜吊时&#xff0c;一定要放空圈&#…