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…...
丹青识画系统C语言文件读写操作：本地图像批处理脚本
丹青识画系统C语言文件读写操作：本地图像批处理脚本 1. 引言 如果你是一个C语言开发者，手头有一堆图片需要分析，比如给它们打标签、识别内容，但你的工作环境是内网或者对网络有严格限制，没法直接调用在线的AI服务&am…...
NaViL-9B效果实录：复杂场景下中英文混合文字识别准确率达98.2%
NaViL-9B效果实录：复杂场景下中英文混合文字识别准确率达98.2% 1. 模型介绍 NaViL-9B是一款原生多模态大语言模型，由专业研究机构开发。它能够同时处理纯文本问答和图片理解任务，特别擅长复杂场景下的文字识别。在实际测试中，该…...
深度解析：如何通过自动化技术实现企业通讯工具外部群的自动化管理
突破接口限制，实现私域社群运营的“最后一公里”自动化 在私域流量运营中，外部群（包含客户的群聊）的管理效率一直是技术痛点。官方接口往往对外部群的某些主动操作（如主动发送、群成员管理等）有较为严格的…...
Harmonyos应用实例228：数学文化与数学史
10. 数学文化与数学史 功能简介：展示数学发展史上的重要事件、数学家及其贡献，通过时间轴和互动展示，介绍数学文化的发展历程。支持按时期、地区筛选，帮助学生了解数学的历史背景和文化价值。 ArkTS代码： // 定义类型接口 interface Mathematician {name: stringperiod…...
Mamba模型实战：如何用S6替代Transformer处理长文本（附代码示例）
Mamba模型实战：如何用S6替代Transformer处理长文本（附代码示例） 在自然语言处理领域，Transformer架构因其强大的注意力机制而长期占据主导地位。然而，当面对长文本处理任务时，Transformer的二次方计算复杂度…...
BGV vs BFV：基于LWE的两大全同态加密方案，到底该怎么选？
BGV vs BFV：基于LWE的两大全同态加密方案技术选型指南 当隐私计算项目需要处理加密数据上的复杂运算时，全同态加密（FHE）方案的选择往往成为架构设计的核心决策点。作为第二代FHE方案的典型代表，BGV和BFV虽然同属基于L…...
如何用Unity打造一款MMORPG：从零开始的全流程实战教程
如何用Unity打造一款MMORPG：从零开始的全流程实战教程 当《魔兽世界》《最终幻想14》等经典MMORPG持续创造商业奇迹时，许多开发者都怀揣着打造下一个爆款的梦想。Unity引擎凭借其跨平台能力和完善的工具链，已成为独立团队和中小厂商开发大型多…...
Phi-3-mini-128k-instruct与STM32开发：生成嵌入式C代码与调试逻辑
Phi-3-mini-128k-instruct与STM32开发：生成嵌入式C代码与调试逻辑 1. 引言 如果你玩过STM32，尤其是像STM32F103C8T6这种经典的“蓝色药丸”最小系统板，肯定对下面这些场景不陌生：为了点亮一个LED，翻遍数据手册&#…...
Infiniband网络排错指南：从`ibstatus`异常到OpenSM日志分析，一次搞定常见连接问题
Infiniband网络排错实战：从基础诊断到高级调优的全链路指南 当40Gbps的Infiniband链路突然降速到10Gbps，或者关键节点的OpenSM服务频繁崩溃时，每个运维工程师都能体会到那种指尖发凉的焦虑。本文将带你穿越Infiniband故障迷雾，构建…...
centos7安装MySQL8.4手册
目录前言一、首先更新插件，并查看当前系统版本二、安装步骤--在线安装1、创建mysql目录2、安装rpm包3、安装 mysql-community-server4、启动MySQL服务5、查看MySQL状态6、设置开机自启动三、查看默认密码四、登录mysql五、修改密码六、开启远程访问1. 修改 MySQL 配…...