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…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
云原生玩法三问：构建自定义开发环境
云原生玩法三问：构建自定义开发环境 引言 临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。 运行设备的环境老，本地环境版本高，ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...