当前位置：首页 > news >正文

vue自定义组件双向数据绑定

news 来源：原创 2025/5/13 12:14:05

1、使用v - model指令（推荐方式）
2、手动实现双向绑定（不使用v - model语法糖）
3、 .sync修饰符
4、.sync 与 v - model 的比较

1、使用v - model指令（推荐方式）

在 Vue 中，v - model是一个语法糖，它在组件上的使用实际上是自动扩展为特定的属性和事件。
例如，创建一个自定义组件MyInput，它类似于原生的input标签可以实现数据双向绑定。
首先，在组件内部，要通过model选项来定义v - model绑定的属性和对应的事件。
以下是MyInput组件的示例代码：

<template><input :value="value" @input="updateValue">
</template>
<script>
export default {name: 'MyInput',props: {value: String},methods: {updateValue(event) {this.$emit('input', event.target.value);}},model: {prop: 'value',event: 'input'}
};
</script>

然后在父组件中使用MyInput组件并进行双向绑定：

<template><div><my - input v - model="message"></my - input><p>Message: {{message}}</p></div>
</template>
<script>
import MyInput from './MyInput.vue';
export default {components: {MyInput},data() {return {message: 'Hello'};}
};
</script>

在这里，MyInput组件内部通过props接收value属性，这个属性是由父组件通过v - model传递过来的。当input元素的input事件触发时，组件内部通过$emit触发input事件，并将新的值传递给父组件。父组件中的v - model会自动更新绑定的message数据。

2、手动实现双向绑定（不使用v - model语法糖）

还是以一个类似输入框的组件为例。在父组件中，将数据传递给子组件作为属性，同时给子组件传递一个更新数据的方法。
子组件代码如下：

<template><input :value="inputValue" @input="handleInput">
</template>
<script>
export default {name: 'CustomInput',props: {inputValue: String},methods: {handleInput(event) {this.$emit('updateValue', event.target.value);}}
};
</script>

父组件代码：

<template><div><custom - input :inputValue="parentValue" @updateValue="updateParentValue"></custom - input><p>Parent value: {{parentValue}}</p></div>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {components: {CustomInput},data() {return {parentValue: 'Initial value'};},methods: {updateParentValue(newValue) {this.parentValue = newValue;}}
};
</script>

在这个例子中，父组件将parentValue作为inputValue属性传递给子组件。子组件在input事件触发时，通过$emit触发updateValue事件，并将新的值传递给父组件。父组件监听updateValue事件，调用updateParentValue方法来更新parentValue数据。

3、 .sync修饰符

基本概念

在 Vue 中，.sync是一个语法糖，主要用于在父子组件之间实现双向数据绑定。它提供了一种简洁的方式来让子组件能够修改父组件中的数据。
例如，我们有一个父组件ParentComponent和一个子组件ChildComponent，父组件中有一个数据属性count，当我们想要子组件能够修改这个count属性时，可以使用.sync修饰符。
父组件代码如下：

<template><div><p>Count in Parent: {{count}}</p><child - component :count.sync="count"></child - component></div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {components: {ChildComponent},data() {return {count: 0};}
};
</script>

子组件代码如下：

<template><div><button @click="incrementCount">Increment Count in Child</button></div>
</template>
<script>
export default {props: {count: Number},methods: {incrementCount() {this.$emit('update:count', this.count + 1);}}
};
</script>

工作原理

当使用.sync修饰符时，实际上是一个语法简写。对于<child - component :count.sync=“count”></child - component>这样的代码，它等价于<child - component :count=“count” @update:count=“count = $event”></child - component>。
在子组件内部，当需要修改父组件传递过来的count属性时，通过$emit发送一个update:count事件，并且将新的值作为参数传递出去。父组件接收到这个事件后，就会将count属性更新为新的值，从而实现了双向数据绑定。

4、.sync 与 v - model 的比较

相似点：
- 它们都可以实现父子组件之间的数据双向绑定。都是一种语法糖，帮助开发者更简洁地实现数据交互。
不同点：
- v - model主要用于表单元素或者类似表单元素的自定义组件，并且在组件内部默认绑定的属性是value，对应的事件是input（当然可以通过model选项进行修改）。而.sync可以用于更广泛的数据双向绑定场景，只要遵循update:propName这样的事件命名规则就可以。
- v - model在一个组件上通常只用于一个属性的双向绑定，而.sync可以用于多个属性的双向绑定，例如<component :prop1.sync=“data1”:prop2.sync=“data2”>。

vue自定义组件双向数据绑定

1、使用v - model指令（推荐方式）2、手动实现双向绑定（不使用v - model语法糖）3、 .sync修饰符4、.sync 与 v - model 的比较 1、使用v - model指令（推荐方式） 在 Vue 中，v - model是一个语法糖…...

编程日记 2025/5/13 12:14:05

【Linux课程学习】：想对Linux说的话

🎁个人主页：我们的五年 🔍系列专栏：Linux课程学习 🌷追光的人，终会万丈光芒 🎉欢迎大家点赞👍评论📝收藏⭐文章目录一.Linux学习存在的问题： 二.Linu…...

编程日记 2025/5/9 1:31:22

重生之我在异世界学编程之C语言：初识一维和二维数组篇

大家好，这里是小编的博客频道小编的博客：就爱学编程很高兴在CSDN这个大家庭与大家相识，希望能在这里与大家共同进步，共同收获更好的自己！！！ 本文目录引言正文数组的基本类型：一维…...

编程日记 2025/5/11 14:54:01

《Vue 实战：小型项目练手与感悟》

一、Vue 基础与准备在开始 Vue 项目之前，对 JavaScript、CSS、HTML 基础知识的掌握至关重要。一、JavaScript 基础知识要求数组常用方法 filter ()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 map ()&a…...

编程日记 2025/5/6 4:42:21

使用uniapp开发小程序场景：在百度地图上调用接口返回的设备相关信息并展示

首先在百度地图开发者平台注册微信小程序开发密钥下载百度地图SDK-bmap-wx.min.js,下载地址在项目入口index.html页面进行引入页面中进行调用，代码示例如下<map id"map" longitude"108.95" latitude"34.34" scale"3" :m…...

编程日记 2025/5/9 17:52:04

计算机毕业设计Python轨道交通客流预测分析可视化智慧交通机器学习深度学习人工智能爬虫交通大数据

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2025/5/12 8:00:46

使用 Wireshark 捕获和分析 IEC 60870-5-104 流量基本步骤

一 .IEC 60870-5-104 是什么? IEC 60870-5-104 是一种用于电力系统中数据传输的通信协议，它结合了 IEC 60870-5-101 的应用服务和 TCP/IP 网络协议。该标准定义了一种通过网络连接进行远动控制（如遥测、遥控等）的方法。使用 Wireshark 捕…...

编程日记 2025/5/7 7:14:00

WPF+LibVLC开发播放器-音量控制和倍速控制

界面界面上增加音量的控件和倍速控制控件音量控制主要也是一个Slider进度条控件来实现音量调节我们这里设置默认的最大值为100，默认Value值也为100，默认声音开到最大这里目前完全由前端控制音量调节，可以直接使用ValueChanged事件实…...

编程日记 2025/5/6 5:17:31

【数据中心建设资料】数据中心安全建设解决方案，数据中心整理解决方案，数据中心如何做到安全保障，数据中台全方案（Word全原件）

第一章解决方案 1.1 建设需求 1.2 建设思路 1.3 总体方案信息安全系统整体部署架构图 1.3.1 IP准入控制系统 1.3.2 防泄密技术的选择 1.3.3 主机账号生命周期管理系统 1.3.4 数据库账号生命周期管理系统 1.3.5 双因素认证系统 1.3.6 数据库审计系统 1.3.7 数据脱敏系统 1.3.8…...

编程日记 2025/5/7 9:50:09

Apache HTTPD多后缀解析漏洞

进入靶场上来就是一个文件上传的功能经过尝试，发现只有jpg，png，gif文件能上传上去，而题目又说了，这个是Apache的中间件，Apache文件解析漏洞涉及到一个Apache解析文件的特性，Apache默认一个文…...

编程日记 2025/5/2 8:24:26

html+css+JavaScript实现轮播图

html+css+JavaScript实现轮播图实现思路要实现一个轮播图功能，我们需要HTML来构建结构，CSS来设计样式，以及JavaScript来添加交互功能。下面我将分别分析这三个部分是如何协同工作来实现轮播图的。 HTML - 结构 HTML部分定义了轮播图的基本结构，包括图片列表、指示器和…...

编程日记 2025/5/6 10:46:35

Golang 八股（持续补充...）

目录进程、线程、协程 Go语言——垃圾回收 GC的触发条件 GC调优 GMP调度和CSP模型 Groutine的切换时机 Goroutine调度原理 Goroutine的抢占式调度 Context结构原理 Context原理 Golang内存分配机制竞态、内存逃逸 golang内存对齐机制 golang中new和make的区别&a…...

编程日记 2025/5/5 12:43:01

MFC实现全屏功能

之前全屏都是参考： MFC单文档（SDI）全屏程序的实现主要思路就是将各种菜单工具栏隐藏恢复。随着MFC的升级，MFC框架本身就具备了全屏的功能。微软有一个全屏实现类： CFullScreenImpl Class managing full-screen mod…...

编程日记 2025/5/3 11:37:43

AI换脸facefusion 3.0.1安装及其使用方法(源代码安装)

文章目录 1. 本文简介2. 软件环境准备软件下载及安装代码下载 3. Conda环境4. 加速环境5. 依赖安装6. 图片测试今天给大家分享换脸facefusion 3.0.1使用方法。不仅可以对单张图片换脸，也可以对视频换脸。如果是单张图片的话，没有GPU速度也很快&#xff…...

编程日记 2025/5/8 21:03:19

//图像到点云的转换//C 标准库 #include <iostream> #include <string>//OpenCV 库 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp>//PCL 库 #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> #inclu…...

编程日记 2025/5/12 8:32:57

处理一个MP4视频，检测里面出现的人脸，并根据特征值计算相似度来追踪和显示出每个人脸的ID

使用Mediapipe, opencv 处理一个MP4视频，检测里面出现的人脸，然后使用Mediapipe 计算每个出现的人脸的特征值，并根据特征值计算相似度来追踪和显示出每个人脸的ID import cv2 import mediapipe as mp import numpy as np# 初始化Mediapipe人脸检测和FaceMesh模型 mp_face_de…...

编程日记 2025/5/12 18:01:57

一文了解模式识别顶会ICPR 2024的研究热点与最新趋势

简介对模式识别研究领域前沿方向的跟踪是提高科研能力和制定科研战略的关键。本文通过图文并茂的方式介绍了ICPR 2024的研究热点与最新趋势，帮助读者了解和跟踪模式识别的前沿研究方向。本推文的作者是黄星宇，审校为邱雪和许东舟。一、会议介绍 ICPR…...

编程日记 2025/5/13 8:45:10

【WRF-Urban】WPS中有关Urban的变量设置

【WRF-Urban】WPS中有关Urban的变量设置地理数据源的配置WRF-Urban所需静态地理数据1、LANDUSE：包含城市地表分类的土地利用数据。2、URB_PARAM：城市参数数据集。3、FRC_URB2D：城市覆盖度数据集 WRF默认设置（美国）数据…...

编程日记 2025/5/12 15:57:28

Android中 ViewPager 和 ViewPager2 的区别

学习笔记 ViewPager 和 ViewPager2 都是 Android 中实现滑动页面效果的控件，用于在一系列页面之间进行切换。ViewPager2 是 ViewPager 的升级版本，提供了更多功能和灵活性。本文将从各个方面详细对比这两个控件，帮助你理解它们的区别和使用场…...

编程日记 2025/5/13 9:17:50

python使用pdfplumber工具包加载pdf格式数据

说在前面大问题，对于两栏pdf数据，我这边提取出来的数据发现它很离谱。它居然直接忽略了两栏特性，直接将第1栏的句子拼接上了第2栏的句子解决方法：pypdf2尝试后可以正确识别两栏数据，非常棒。示例 pdfplumber代…...

编程日记 2025/5/5 23:11:25

C++设计模式：代理模式（Proxy）（附案例代码）

什么是代理模式？ 代理模式是一种结构型设计模式，主要用于为某个对象提供一个代理，以便在不直接访问对象的情况下控制对其的访问。代理可以在客户端和目标对象之间起到一个中介的作用，添加一些额外的操作，例如权限控制…...

编程日记 2025/5/9 23:49:30

Y20030028 JAVA+SSM+MYSQL+LW+基于JAVA的考研监督互助系统的设计与实现源代码配置文档

基于JAVA的考研监督互助系统 1.项目描述2. 课题开发背景及意义3.项目功能4.界面展示5.源码获取 1.项目描述随着高等教育的普及和就业竞争的加剧，越来越多的学生选择继续深造，参加研究生入学考试。考研人数的不断增加，使得考研过程中的学习监…...

编程日记 2025/5/4 20:28:24

《Java核心技术I》volatile字段

volatile字段有多处理器的计算机能够暂时在寄存器或本地内存缓存中保存内存值，其结果是，运行在不同处理器上的线程可能看到同一个内存位置上有不同的值。编译器可以改变指令执行的顺序以使吞吐量更大化，编译器不会选择可能改变代码语义的顺…...

编程日记 2025/5/11 3:26:27

使用Hadoop MapReduce进行大规模数据爬取

Hadoop MapReduce概述 Hadoop MapReduce是一个编程模型，用于处理和生成大数据集。它由Map和Reduce两个主要阶段组成。Map阶段负责处理输入数据，并将结果输出为键值对；Reduce阶段则对Map阶段的输出进行汇总和合并，生成最终结果。 …...

编程日记 2025/5/10 9:34:42

git 删除大文件的方法

1 首先首先要提交所有的更改 git filter-branch -f --prune-empty --index-filter “git rm -rf --cached --ignore-unmatch 文件相对路径复制到这里” --tag-name-filter cat – --all 2 提交 git commit -am “d” git push...

编程日记 2025/5/5 19:54:55

qt数据类型定义（包含签名）

先推荐一个处理markdown表格的网站，超级好用：markdown表格处理，我就是用这个表格处理的excel中的数据上传。下表整理了数据类型的值范围、签名、qt如何定义等内容。类型范围/子类型dbus签名qt支持的签名qt类型定义方式转换为variantint8(…...

编程日记 2025/5/9 9:07:28

2025美赛数学建模常用数据库网站大全

优秀模板写作红宝书数学模型获取——更多资料请点击下方名片进群获取。一、可以查询美国各个领域经济指标的网站: olap.epsnet.com.cnhttps://www.ers.usda.gov/data-products/rice-yearbook/www.ers.usda.govU.S. Energy Information Administration (EIA) www.eia.govhttp…...

编程日记 2025/5/7 16:32:38

Vue 组件通信全面解析

Vue 组件通信全面解析：方式、原理、优缺点及最佳实践在 Vue 开发中，组件通信是一个重要的核心问题。随着应用复杂度的增加，如何在组件之间有效传递数据、触发事件，直接影响代码的可维护性和可扩展性。Vue 提供了多种组件通信方式…...

编程日记 2025/5/9 6:29:07

node.js基础学习-express框架-路由及中间件（十）

一、前言 Express 是一个简洁、灵活的 Node.js Web 应用框架。它基于 Node.js 的内置 HTTP 模块构建，提供了一系列用于构建 Web 应用程序和 API 的功能，使开发者能够更高效地处理 HTTP 请求和响应，专注于业务逻辑的实现。其特点包括简单易用…...

编程日记 2025/5/6 9:54:33

书生浦语第四期--基础岛-第六关

文章目录使用opencompass进行模型评价配置KEY环境变量以及API模型接口配置数据集进行评测开始评测测评结束使用opencompass进行模型评价配置KEY环境变量以及API模型接口配置数据集进行评测开始评测期间可能遇到没有下载的包例如，我遇到了： No m…...

编程日记 2025/5/6 6:00:18

flinkSql中累计窗口CUMULATE

eventTime package com.bigdata.day08;import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.table.api.bridge.java.StreamTableEnvironment;public class _05_flinkSql_Cumulate_eventTime {/*** 累积窗口 eventTime* …...

编程日记 2025/5/12 22:24:38

1、使用v - model指令（推荐方式）

2、手动实现双向绑定（不使用v - model语法糖）

3、 .sync修饰符

4、.sync 与 v - model 的比较

相关文章：