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…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...
解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...