v-model和.sync区别

在vue2中提供了.sync修饰符,但是在vue3中不再支持.sync,取而代之的是v-model。

1.在vue2中v-model和.sync区别:

1.相同点:都是语法糖,都可以实现父子组件中的数据的双向通信。
​ 区别在于往回传值的时候. sync 的 $emit 所调用的事件名必须是update:属性名。
2.格式不同:v-model=“num”, :num.sync=“num”
​ v-model: @input + value
​ :num.sync: @update:num
3.v-model只能用一次;.sync可以有多个

2. .sync修饰符的作用

.sync能够实现属性间的一个双向绑定。比如说现在我们有一个这个组件,然后上面有一个v-bind="title"这样的一个属性。
如果说写成v-bind:title.sync="title",那么它可以看做是一个语法糖,它会隐式的向子组件里面传递一个v-on:update="title"这样的一个事件,也就是说

<my-dialog :title.sync="title"></my-dialog>

等价于

<my-dialog :title="title" @update="title=> title = newTitle"></my-dialog>

然后在子组件里面传过去调用$emit(update:title)冒号title来去修改父组件里面所绑定的值。它是能够实现属性间的一个双向绑定。

//my-dialog.vue
<template><input :value="title" @update="$emit('update:title', $event.target.value)"/>
</template>


官方文档关于这部分的参考:https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

3 问题:v-model只能用于表单组件是吗?即使用在自定义组件中,子组件里面也必须是表单组件?

v-model在页面中不只是能用于表单控件<input>, <textarea> and <select>中。除此之前还可以使用到自定义组件中。

父组件使用了v-model以后,自定义组件里面,也不止限于表单组件。v-model其实只是一个语法糖,和子组件是不是表单组件没有关系。v-model="name" 其实是其实是v-bind:name="name"和v-on:update="name=>newName=name"的语法缩写。
比如说,就算是在子组件中input控件可以实现双绑也是因为使用了:value="name"和@input="$emit('update:name', $event.target.value)",其实是内部对这个v-model进行了再次处理。
而对于div等这种,也可以通过$emit()的形式通知父组件然后由父组件对值进行修改。
总得来说就是v-model可以使用在表单或者自定义组件上。但是自定义组件里面的内容,针对表单和非表单控件,要做不同的处理才能实现数据双绑。

//父组件<my-dialog v-model:name="name"></my-dialog>//子组件:<inputtype="text":value="name"@input="$emit('update:name', $event.target.value)"/>
defineProps(['name'])
defineEmits(['update:name'])

4.vue3在自定义组件中的v-model写法

<CustomInput v-model="searchText"></CustomInput>

 等价于:

<CustomInput:model-value="searchText"@update:model-value="newValue => searchText = newValue"
/>

子组件中:

<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script><template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/>
</template>

 

4.题:vue2中的v-bind:name.sync的用法是不是和vue3中v-model在自定义组件中的用法一样的?

vue2和vue3中v-model最大的区别就是对.sync修饰符进行了改写,v-model中整合了.sync修饰符的功能

<text-document v-bind:title.sync="title"></text-document>

就相当于

<text-documentv-bind:title="title"v-on:update:title="title = $event"
></text-document>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/115324.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信扫一扫抽奖活动怎么做

在当今数字化时代&#xff0c;微信作为中国最大的社交媒体平台之一&#xff0c;拥有着庞大的用户群体和广泛的影响力。微信扫一扫抽奖活动作为一种创新的营销方式&#xff0c;可以利用微信的用户基础和社交属性&#xff0c;吸引更多的目标用户参与&#xff0c;提高品牌知名度和…

Win32 命名管道

命名管道简单封装 CNamedPipe.h #pragma once #include <string> #include <windows.h> #include <tchar.h>#pragma warning(disable:4200)class CNamedPipe { public:CNamedPipe();~CNamedPipe();CNamedPipe(const CNamedPipe& r) delete;CNamedPipe&…

鸿蒙状态栏设置

鸿蒙状态栏设置 基于鸿蒙 ArkTS API9&#xff0c;设置状态栏颜色&#xff0c;隐藏显示状态栏。 API参考文档 参考文档 新建项目打开之后发现状态栏是黑色的&#xff0c;页面颜色设置完了也不能影响状态栏颜色&#xff0c;如果是浅色背景&#xff0c;上边有个黑色的头&#…

众和策略:题材股什么意思?

题材股是股票商场上的一个术语&#xff0c;许多刚接触股票出资的人可能对它不太熟悉。那么&#xff0c;题材股什么意思呢&#xff1f;在本文中&#xff0c;咱们将从多个角度剖析这个问题&#xff0c;帮忙读者更好地了解。 一、什么是题材股 题材股是指某个工作或主题的股票集结…

机器学习笔记 - 深度学习中跳跃连接的直观解释

一、概述 如今人们利用深度学习做无数的应用。然而,为了理解在许多作品中看到的大量设计选择(例如跳过连接),了解一点反向传播机制至关重要。 如果你在 2014 年尝试训练神经网络,你肯定会观察到所谓的梯度消失问题。简单来说:你在屏幕后面检查网络的训练过程,你看到的只…

跨越单线程限制:Thread类的魅力,引领你进入Java并发编程的新纪元

线程的概述 线程是一个程序的多个执行路径&#xff0c;执行调度的单位&#xff0c;依托于进程存在。 线程不仅可以共享进程的内存&#xff0c;而且还拥有一个属于自己的内存空间&#xff0c;这段内存空间也叫做线程栈&#xff0c;是在建立线程时由系统分配的&#xff0c;主要用…

【C++】不是用new生成的对象调用析构函数

2023年10月23日&#xff0c;周一上午 #include <iostream>class Book{ private:int price; public:~Book(){std::cout<<"调用析构函数"<<std::endl; } };int main(){Book b1;b1.~Book(); } 从运行结果可以看出&#xff1a; 手动调用b1.~Book()时&…

Python笔记

Python基础 一、数据类型 类型值文本类型str数值类型int&#xff0c;float&#xff0c;complex序列类型list&#xff0c;tuple&#xff0c;range映射类型dict集合类型set&#xff0c;frozenset布尔类型bool二进制类型bytes&#xff0c;bytearray&#xff0c;memoryview 1.基…

Leetcode 第 364 场周赛题解

Leetcode 第 364 场周赛题解 Leetcode 第 364 场周赛题解题目1&#xff1a;2864. 最大二进制奇数思路代码复杂度分析 题目2&#xff1a;美丽塔 I思路代码复杂度分析 题目3&#xff1a;美丽塔 II思路代码复杂度分析 题目4&#xff1a;统计树中的合法路径数目思路代码复杂度分析 …

机器人系统 ROS 常用命令行工具

1. 启动ros 主节点 roscore roscore运行成功如图&#xff1a; 1.1 rosrun 启动服务节点 例子&#xff1a;启动一个小乌龟节点 rosrun turtlesim turtlesim_node运行结果如图&#xff1a; 1.2 启动键盘控制 打开新的命令窗口&#xff0c;启动turtle_teleop_key 节点 rosr…

单窗口单IP适合炉石传说游戏么?

游戏道具制作在炉石传说中是一个很有挑战的任务&#xff0c;但与此同时&#xff0c;它也是一个充满机遇的领域。在这篇文章中&#xff0c;我们将向您展示如何在炉石传说游戏中使用动态包机、多窗口IP工具和动态IP进行游戏道具制作。 作者与主题的关系&#xff1a;作为一名热爱炉…

JSX看着一篇足以入门

JSX 介绍 学习目标&#xff1a; 能够理解什么是 JSX&#xff0c;JSX 的底层是什么 概念&#xff1a; JSX 是 javaScriptXML(HTML) 的缩写&#xff0c;表示在 JS 代码中书写 HTML 结构 作用&#xff1a; 在 React 中创建 HTML 结构&#xff08;页面 UI 结构&#xff09; 优势&a…

监控易一体化运维:打造机房环境监控的卓越典范

随着信息技术的飞速发展&#xff0c;机房作为企业数据和业务的中心&#xff0c;其运行状态和管理的重要性日益凸显。为确保机房的稳定性和可靠性&#xff0c;越来越多的企业选择使用一体化运维管理软件来进行实时监控。在这方面&#xff0c;监控易品牌提供了一款全面而高效的机…

VM虚拟机 13.5 for Mac

VMware Fusion Pro for Mac是一款强大的虚拟机软件&#xff0c;可以在Mac操作系统中创建、运行和管理多个虚拟机&#xff0c;使用户可以在一台Mac电脑上同时运行多个操作系统和应用程序。 以下是VMware Fusion Pro for Mac的主要特点&#xff1a; 1. 支持多种操作系统&#xff…

【数据结构】线性表(九)队列:链式队列及其基本操作(初始化、判空、入队、出队、存取队首元素)

文章目录 一、队列1. 定义2. 基本操作 二、顺序队列三、链式队列0. 链表1. 头文件2. 队列结构体3. 队列的初始化4. 判断队列是否为空5. 入队6. 出队7. 存取队首元素8. 主函数9. 代码整合 堆栈Stack 和 队列Queue是两种非常重要的数据结构&#xff0c;两者都是特殊的线性表&…

【Java 进阶篇】深入浅出:Bootstrap 轮播图

在现代网页设计中&#xff0c;轮播图是一个常见的元素。它们可以用于展示图片、广告、新闻、产品或任何您希望吸引用户注意力的内容。要实现一个轮播图&#xff0c;您通常需要一些复杂的HTML、CSS和JavaScript代码&#xff0c;这对于初学者来说可能会感到困难。但幸运的是&…

React环境初始化

环境初始化 学习目标&#xff1a; 能够独立使用React脚手架创建一个React项目 1.使用脚手架创建项目 官方文档&#xff1a;(https://create-react-app.bootcss.com/)    - 打开命令行窗口    - 执行命令      npx create-react-app projectName    说明&#xff1a…

四、网络请求与路由

一、网络请求 1、Axios请求 Axios是一个基于promise的网络请求库 &#xff08;1&#xff09;安装 npm install --save axios&#xff08;2&#xff09;引入 import axios from "axios"全局引入 import axios from "axios" import { createApp } from …

Github 2FA绑定中国+86手机号码实现两步验证

GitHub宣布&#xff0c;到 2023 年底&#xff0c;所有用户都必须要启用双因素身份验证 (2FA)&#xff0c;不能只用密码. GitHub开启2FA后&#xff0c;除了输入密码外&#xff0c;还需要通过一次性密码&#xff08;OTP&#xff09;等方式做第二级身份验证&#xff0c;才能成功登…

靶机 DC_1

DC_1 信息搜集 存活检测 详细扫描 网页目录扫描 网页信息搜集 cms 为 Drupal 漏洞利用 使用 msf 搜索 drupal 的漏洞 启动 msfconsole搜索 search drupal尝试编号为 0 的漏洞 失败 利用编号为 1 的漏洞 use 1查看需要配置的选项 show options设置目标 ip set rhost 10…