Vue3之组件间的双向绑定
何为组件间双向绑定
我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值。组件间的双向绑定就是对于父组件的变更，子组件可以感知到，同样对于子组件的变更，父组件也可以感知到。这个过程是自动的。Vue中的双向绑定用v-model来实现
示例解析
这里我们还是以一个计数器组件来介绍Vue的双向绑定，我们定义一个Div显示一个数，当我们点击这个数的时候，让这个数加1，代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>组件间双向绑定</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {count:1}},methods:{handleCountOneChange(count){this.count = count;}},template: `<div><counter v-model:count = "count" @change-count-one="handleCountOneChange"/></div>`});app.component('counter',{props:['count'],methods: {handleItemClick(){this.$emit('change-count-one',this.count + 1);},},template:`<div @click="handleItemClick">{{count}}</div>`});const vm = app.mount('#root');
</script>
</html>
在之前我们要将父组件传过来的值做加一操作的时候，由于是单向数据流，我们只能把父组件传来的值先拷贝一份到子组件，然后让子组件去改变自己的这个值来达到子组件的计数效果，本节所讲的双向数据绑定可以在子组件中将这个值加一后传到父组件，父组件收到这个值以后又会同步给子组件，这样就完成了一个计数器。如上面代码所示，父组件通过v-model的方式将count传给子组件，子组件收到这个值后，当用户点击了div后，就会执行handleItemClick方法，这个方法会通过事件的方式，将count+1的值通知给父组件，父子组件由于是双向绑定的，所以这个count的值又会被子组件感知到然后子组件就显示了count+1 的值了，如此循环，点击一次，值就加一。就完成了counter组件的计数功能了。
这里需要注意的是，父组件传递值的时候用法是： v-model:count = "count" 不要忘记后面的“:count”少了是无法显示的
那假设我们不想使用:count的方式呢，那就可以用指定的一个关键字modelValue代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>组件间双向绑定</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="root"></div>
</body>
<script>const app = Vue.createApp({data() {return {count:1}},methods:{handleCountOneChange(count){this.count = count;}},template: `<div><counter v-model = "count" @change-count-one="handleCountOneChange"/></div>`});app.component('counter',{props:['modelValue'],methods: {handleItemClick(){this.$emit('change-count-one',this.modelValue + 1);},},template:`<div @click="handleItemClick">{{modelValue}}</div>`});const vm = app.mount('#root');
</script>
</html>
注意此处只能叫modelValue,其他的名字都不可以
总结
其实本文的内容非常简单，就是使用v-model来实现vue组件之间的双向绑定，这里面有个事件的概念，就是 this.$emit('change-count-one',this.count + 1);这个，这个可以理解成一个事件通过$emit()发送,父组件通过@change-count-one="handleCountOneChange"去监听，然后执行对应的操作。这个下次讲。本章就只讲通过v-model的方式来实现组件间双向绑定，但是需要注意父组件传值的属性名若要用自己的值就用v-model:自定义属性名 = "data()方法中定义的值"，的方式，子组件通过prop:['自定义属性值']方式接收，或者是使用modelValue作为传值的属性名
相关文章：
Vue3之组件间的双向绑定
何为组件间双向绑定 我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值。组件间的…...
Java语法基础（一）
目录 代码注释方法 编码规范 基本数据类型及取值范围 变量和常量的声明与赋值 变量 常量 标识符 基本数据类型的使用 整数类型的使用 浮点类型的使用 布尔类型的使用 字符类型的使用 代码注释方法 单行注释：使用“//”进行单行注释多行注释：使…...
优思学院｜零质量控制是什么概念？
零质量控制（Zero Quality Control）是指一个理想的系统，可以生产没有任何缺陷的产品，因此不需要频繁的检查，从而节省时间和金钱。那些追求过程优化并致力于持续过程改进的组织将零质量控制（Zero Quality Con…...
2023-03-09 CMU15445-Query Execution
摘要: CMU15445, Project #3 - Query Execution 参考: Project #3 - Query Execution | CMU 15-445/645 :: Intro to Database Systems (Fall 2022) https://github.com/cmu-db/bustub 要求: OVERVIEW At this point in the semester, you have implemented the internal co…...
vuedraggable的使用
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可…...
双馈风力发电机-900V直流混合储能并网系统MATLAB仿真
MATLAB2016b主体模型：双馈感应风机模块、采用真实风速数据。混合储能模块、逆变器模块、转子过电流保护模块、整流器控制模块、逆变器控制模块。直流母线电压：有功、无功输出（此处忘记乘负一信号输出），所以是负的。蓄电…...
leader选举过程
启动electionTimer，进行leader选举。 一段时间没有leader和follower通信，就会超时，开始选举leader过程。有个超时时间，如果到了这个时间，就会触发一个回调函数。具体如下: private void handleElectionTimeout() {boo…...
建造者模式
介绍 Java中的建造者模式是一种创建型设计模式,它的主要目的是为了通过一系列简单的步骤构建复杂的对象,允许创建复杂对象的不同表示形式,同时隐藏构造细节.它能够逐步构建对象,即先创建基本对象,然后逐步添加更多属性或部件,直到最终构建出完整的对象. 该模式的主要思想是将…...
IO与NIO区别
一、概念 NIO即New IO，这个库是在JDK1.4中才引入的。NIO和IO有相同的作用和目的，但实现方式不同，NIO主要用到的是块，所以NIO的效率要比IO高很多。在Java API中提供了两套NIO，一套是针对标准输入输出NIO，另一套就是网络编程NIO。 二、NIO和IO的主要区别 下表总结了Java I…...
无监督循环一致生成式对抗网络：PAN-Sharpening
Unsupervised Cycle-Consistent Generative Adversarial Networks for Pan Sharpening （基于无监督循环一致生成式对抗网络的全色锐化） 基于深度学习的全色锐化近年来受到了广泛的关注。现有方法大多属于监督学习框架，即对多光谱࿰…...
ArrayList源码分析（JDK17）
ArrayList类简介类层次结构构造无参构造有参构造添加元素add：添加/插入一个元素addAll:添加集合中的元素扩容mount与迭代器其他常见方法不常见方法不常见方法的源码和小介绍常见方法的源码和小介绍积累面试题ArrayList是什么？可以用来干嘛？Ar…...
)
数字IC/FPGA面试笔试准备(自用待填坑)
文章目录 前言常见的IC问题数字电路基础问题Verilog & SV跨时钟域信号处理类综合与时序分析类低功耗方法STA(静态时序分析)RTL设计(包含手撕代码)总线问题AXIAPBAHB体系结构的问题RISCV的问题一些笔试选择题前言 这是实验室师兄面试过程中整理的面试和笔试题目，目前只有题…...
基于多任务融合的圣女果采摘识别算法研究
基于多任务融合的圣女果采摘识别算法研究 1、简介 本文主要解决圣女果生产销售环节中，现有的流程是采摘成熟的圣女果，再对采摘下的果实进行单独的品质分级，不仅费时费力，而且多增加一个环节，也增加了对果实的二次伤害…...
又一个开源第一！飞桨联合百舸，Stable Diffusion推理速度遥遥领先
AIGC(AI Generated Content)，即通过人工智能方法生成内容，是当前深度学习最热门的方向之一。其在绘画、写作等场景的应用也一直层出不穷，其中，AI绘画是大家关注和体验较多的方向。 Diffusion系列文生图模型可以实现AI绘画应用&…...
数据链路层及交换机工作原理
目录 一，帧格式 1.1 帧头类型字段的作用 1.2 MAC地址 1.3 MTU值 二，交换机工作原理 2.1 交换机的端口 2.2 端口状态 三，交换机基本工作模式及命令 3.1 交换机的工作模式： 3.2 命令 一，帧格式 其中类型是指&am…...
VSCode 开发配置，一文搞定（持续更新中...）
一、快速生成页面骨架 文件 > 首选项 > 配置用户代码片段 选择需要的代码片段或者创建一个新的，这里以 vue.json 举例： 下面为我配置的代码片段，仅供参考： {"Print to console": {"prefix": "…...
全网最详细的（CentOS7）MySQL安装
一、环境介绍 操作系统：CentOS 7 MySQL：5.7 二、MySQL卸载 查看软件 rpm -qa|grep mysql 卸载MySQL yum remove -y mysql mysql-libs mysql-common rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有 MySQL 软件，有的话继续删除。 软件卸…...
基于LSTM的文本情感分析（Keras版）
一、前言 文本情感分析是自然语言处理中非常基本的任务，我们生活中有很多都是属于这一任务。比如购物网站的好评、差评，垃圾邮件过滤、垃圾短信过滤等。文本情感分析的实现方法也是多种多样的，可以使用传统的朴素贝叶斯、决策树，…...
2023年全国最新机动车签字授权人精选真题及答案17
百分百题库提供机动车签字授权人考试试题、机动车签字授权人考试预测题、机动车签字授权人考试真题、机动车签字授权人证考试题库等，提供在线做题刷题，在线模拟考试，助你考试轻松过关。 三、多选题 1.注册登记安全检验时，送检乘用…...
PowerShell远程代码执行漏洞(CVE-2022-41076)分析与复现
漏洞概述PowerShell（包括Windows PowerShell和PowerShell Core）是微软公司开发的任务自动化和配置管理程序，最初只是一个 Windows 组件，由命令行 shell 和相关的脚本语言组成。后于2016年8月18日开源并提供跨平台支持。PowerShell…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术，说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）
1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心 首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...