vue2使用sync修饰符父子组件的值双向绑定

news/2024/5/24 12:02:04/

1、使用场景

    当我需要对一个 prop 进行“双向绑定的时候,通常用在封装弹窗组件的时候来进行使用,当然也会有其他的使用场景,只要涉及到父子组件之间需要传参的都可以使用,尽量不要使用watch监听来进行修改值,也不要尝试直接修改props传过来的参数,可以参考官网单向数据流的方式处理。

2、.sync使用方式

  • 以下是element封装的dialog弹窗组件,就是使用了.sync修饰符来进行控制是否弹出,我们要在项目中对dialog组件进行一个二次封装,也使用.sync的方式来实现。

在这里插入图片描述

  • 子组件代码部分
    1、props接收dialogVisible,并赋值给el-dialog组件;
    2、通过点击事件出发emit事件;
    3、通过为 this.$emit(‘update:dialogVisible’,false),update是固定的,后面的是你需要改变的值,要和你props传过来的值保持一致;
    4、修改后的值会更新到父组件;
// 子组件
<template><div class="hello"><el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="handleClose">取 消</el-button><el-button type="primary" @click="handleConfrim">确 定</el-button></span></el-dialog></div>
</template>
<script>
export default {props: {dialogVisible: {type: Boolean,default: false},},methods: {handleClose(done) {this.$emit('update:dialogVisible',false)},handleConfrim() {this.$emit('update:dialogVisible',false)},change(e) {this.$emit('input', e.data)}}
};
</script>
  • 父组件代码部分
    1、初始化一个默认的值,我这里初始化的值为isShow;
    2、:dialogVisible.sync=“isShow” 向子组件传入dialogVisible,.sync修饰符一定要加上,这样子组的emit的update才会起作用;
    3、然后就可以动态修改父组件的值了;
// 父组件
<template><div id="app"><!-- <img alt="Vue logo" src="./assets/logo.png"> --><el-button type="primary" @click="isShow = true">{{ '展示弹窗' }}</el-button><HelloWorld :dialogVisible.sync="isShow"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},data() {return {isShow: false}}
}
</script>

http://www.ppmy.cn/news/48469.html

相关文章

如何给厂区做导航地图?智能工厂导航地图解决方案公司

如何给厂区做导航地图&#xff1f;在智慧园区中&#xff0c;基于园区的电子地图地图使用的重要性越来越凸显。但目前在园区信息化应用形式中&#xff0c;广泛缺乏专业电子地图的使用&#xff0c;主要原因是&#xff1a;一是地图系统(GIS)实现繁复&#xff0c;与其他展会业务系统…

大数据实战 --- 美团外卖平台数据分析

目录 开发环境 数据描述 功能需求 数据准备 数据分析 RDD操作 Spark SQL操作 创建Hbase数据表 创建外部表 统计查询 开发环境 HadoopHiveSparkHBase 启动Hadoop&#xff1a;start-all.sh 启动zookeeper&#xff1a;zkServer.sh start 启动Hive&#xff1a; nohup …

DelphiMVCFrameWork 源码分析(一)

Delphi 基础Web Service Application 见&#xff1a; Delphi Web Server 流程分析_看那山瞧那水的博客-CSDN博客 DataSnap的见&#xff1a; Delphi DataSnap 流程分析(一)_看那山瞧那水的博客-CSDN博客 Delphi DataSnap 流程分析(二)_看那山瞧那水的博客-CSDN博客 DelphiMVC…

@SpringBootApplication注解

启动类的 SpringBootApplication // // Source code recreated from a .class file by IntelliJ IDEA // (powered by Fernflower decompiler) //package org.springframework.boot.autoconfigure;import java.lang.annotation.Documented; import java.lang.annotation.Elem…

homebrew安装mysql

安装指定版本的软件 我们可以用版本号来安装指定版本的软件,例如: brew install mysql5.7这会安装MySQL 5.7版本。 查看软件Versions 我们可以用brew info命令查看一个软件的所有版本,例如: brew info mysql会显示MySQL所有可安装版本,然后选择想要的版本号安装。 升级软…

设计模式 -- 命令模式

前言 月是一轮明镜,晶莹剔透,代表着一张白纸(啥也不懂) 央是一片海洋,海乃百川,代表着一块海绵(吸纳万物) 泽是一柄利剑,千锤百炼,代表着千百锤炼(输入输出) 月央泽,学习的一种过程,从白纸->吸收各种知识->不断输入输出变成自己的内容 希望大家一起坚持这个过程,也同…

【Leetcode -342. 4的幂 -344.反转字符串 -345.反转字符串中的元音字母】

Leetcode Leetcode -342. 4的幂Leetcode -344.反转字符串Leetcode -345.反转字符串中的元音字母 Leetcode -342. 4的幂 题目&#xff1a;给定一个整数&#xff0c;写一个函数来判断它是否是 4 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false …

item_get-获得aliexpress商品详情API的调用参数说明

item_get-获得aliexpress商品详情 aliexpress.item_get 公共参数 名称类型必须描述keyString是调用key&#xff08;免&#xff09;&#xff08;测&#xff09;&#xff08;试&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&…

Android入门

一、Android系统架构 Android大致可以分为4层架构&#xff1a;Linux内核层、系统运行库层、应用框架层和应用层 1.1Linux内核层 Android系统是基于Linux内核的&#xff0c;这一层为Android设备的各种硬件提供了如显示、音频、照相机、蓝牙、Wi-Fi等底层的驱动。 1.2系统运行层…

ELK简介

ELK 1. ELK2. Elasticsearch&#xff08;ES&#xff09;3. Logstash4. Kibana5. Filebeat6. 缓存/消息队列&#xff08;redis、kafka、RabbitMQ等&#xff09; 1. ELK ELK是三个开源软件的首字母缩写&#xff0c;分别表示&#xff1a;Elasticsearch , Logstash, Kibana , 它们…

腾讯云COS+ElmentUI+SpringBoot视频上传功能实现

文章目录 第一步&#xff1a;选择合适的组件并整合到项目中第二步&#xff1a;前端校验第三步&#xff1a;绑定上传成功方法第四步&#xff1a;腾讯云cos后端接口配置 今天在做项目的时候需要完成一个视频上传的功能&#xff0c;这里做一个记录&#xff01; 第一步&#xff1a;…

MongoDB实现---事务机制

事务机制 原子性是MongoDB实现事务的难点&#xff0c;隔离性和持久性则是MongoDB事务机制的亮点 ACID支持&#xff1a;由于前面说过MongoDB是基于大数据、提供高度可扩展和高可用&#xff1b;所以其事务机制不仅仅是一般ACID还是结合了BASE理论下的ACID 原子性&#xff1a;保…

GreenPlum (一) 初识

在开始了解GreenPlum之前&#xff0c;应该对这种产品的诞生有基本的了解&#xff0c;搭建一个基本的知识框架。对以下历史有基本了解之后应对下文术语进行基本阅读。 ​ 阅读目标: 阅读完成后需要对相关术语以及greenplum有基础理解。 文案基本互联网相关blog进行整体汇总&…

【RabbitMQ学习日记】—— 再见RabbitMQ

一、发布确认高级篇 在生产环境中由于一些不明原因&#xff0c;导致 rabbitmq 重启&#xff0c;在 RabbitMQ 重启期间生产者消息投递失败&#xff0c;导致消息丢失&#xff0c;需要手动处理和恢复如何才能进行 RabbitMQ 的消息可靠投递呢&#xff1f; 特别是在这样比较极端的情…

uniapp 之 将marker 渲染在地图上 点击弹层文字时显示当前信息

目录 效果图 总代码 分析 1.template 页面 地图显示代码 2. onload ①经纬度 ②取值 ③注意 ④ 3.methods ① 先发送 getStationList 请求 获取 数组列表信息 ② regionChange 视野发生变化时 触发 分页逻辑 ③ callouttap 点击气泡时触发 查找 当前 marker id 等…

java ssm高校学术会议论文管理系统

在研究课题--学术会议论文管理系统的实现与设计&#xff0c;对操作使用的便利性&#xff0c;系统的可制定性和安全性以及管理的全面性等多个方面研究。其中主要研究的内容是将学术会议论文管理系统功能划分为: 通知类型、通知信息、部门信息、用户信息用户反馈、会议类型、会议…

编译和链接

目录 1. 程序的翻译环境和执行环境 2. 详解编译链接 2.1 翻译环境 2.2 编译本身也分为几个阶段&#xff1a; 2.2.1汇编过程的简略图 2.3讲解汇编过程的具体过程和要点 2.4运行环境 1. 程序的翻译环境和执行环境 在ANSIC的任何一种实现中&#xff0c;存在两个不同的环境。…

我也曾经因安装库而抓狂,直到我遇到了

入门教程、案例源码、学习资料、读者群 请访问&#xff1a; python666.cn 大家好&#xff0c;欢迎来到 Crossin的编程教室 &#xff01; 几乎所有的 Python 学习者都遇到过“安装”方面的问题。这些安装问题包括 Python 自身环境的安装、第三方模块的安装、不同版本的切换&…

OAuth2.0 实战总结

title: OAuth2.0 实战总结 date: 2023-01-30 11:23:12 tags: OAuth2.0 categories:开发技术及框架 cover: https://cover.png feature: false 1. 引言 1.1 OAuth 2.0 是什么&#xff1f; 用一句话总结来说&#xff0c;OAuth 2.0 就是一种授权协议。那如何理解这里的“授权”…

极简sklearn-使用决策树预测泰坦尼克号幸存者

泰坦尼克号幸存者数据集是kaggle竞赛中入门级的数据集&#xff0c;今天我们就来用决策树来预测下哪些人会成为幸存者。 数据集下载地址: https://download.csdn.net/download/ting4937/87630361 数据集中包含两个csv文件&#xff0c;data为训练用数据,test为测试集。 探索数据…