关于v-model和sync修饰符

最新推荐文章于 2024-03-20 13:26:35 发布
最新推荐文章于 2024-03-20 13:26:35 发布
阅读量311 收藏 1
点赞数 2
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57435656/article/details/120853516
版权
本文探讨了Vue.js中.v-model和.sync修饰符的使用。.sync允许子组件同步更新父组件的值，而v-model是事件监听的语法糖，用于双向数据绑定。两者都可以实现父子组件间的数据通信，但格式和使用场景有所不同。
摘要由CSDN通过智能技术生成

1. .sync修饰符 

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

// 正常父传子： 
<son :a="num" :b="num2"></son>

// 加上sync之后父传子： 
<son :a.sync="num" .b.sync="num2"></son> 

// 它等价于
<son
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></son> 

// 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

2. v-model 

v-model其实就是一个语法糖，绑定value事件，监听input事件。v-model默认会将value属性传递给子组件，并且会监听input事件，实现双向数据绑定

<!--v-model写法-->
<component type="text" v-model="value
最低0.47元/天 解锁文章
数组喜欢打对象
关注
v-model 和 .sync修饰符的区别
xiaoyugan000的博客
07-04 507
vue框架中 v-model一般用于在表单元素中进行双向数据绑定。v-model指令本质上是一个语法糖。语法糖的大概意思就是 是一种更加方便的写法，在不影响其功能的情况下。增加可读性，减少出错率。更加方便使用。一般我们通过下面的例子使用v-model指令实现双向数据绑定 下面是实际上完整的写法： input元素本身有个input事件，是HTML5新加的。每当输入框内容发生变化，就会触发input事件，把最新的value值（$event.target.value）传给val。这就是双向数据绑定。注意：
.sync与v-model的区别
weixin_48837605的博客
08-11 277
.sync与v-model区别是 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。 区别点： 格式不同:v-model="num", :num.sync="num" v-model： @input + value 传递value值,是固定的 :num.sync: @update:num :num是因为一个自定义组件可以传输多个值,用来区分的 v-model只能用一次；.sync可以有多个。 工作的原...
vue .sync 修饰符和自定义v-model的使用
hnnd123的博客
07-09 589
https://www.cnblogs.com/conglvse/p/9704834.html
.sync修饰符与v-model的区别
weixin_58384302的博客
10-18 888
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。
关于修饰符.sync和v-model
haodanzj的博客
08-12 267
目标: 对比v-model掌握.sync的使用 .sync作用: 实现父子组件数据之间的双向绑定，与v-model类似。 类别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。 原理 v-model的原理 <com1 v-model="num"></com1> 等价于 <com1 :value="num" @input="(val)=>this.num=val"></com1> .sync修饰符的原理 // 正常父传子： <
详解VUE自定义组件中用.sync修饰符与v-model的区别
08-27
Vue 自定义组件中用 .sync 修饰符与 v-model 的区别 在 Vue 中，自定义组件是非常常见的需求，特别是在大型项目中。今天，我们将讨论 Vue 自定义组件中用 .sync 修饰符与 v-model 的区别。 一、什么是 .sync 修饰...
vue2中v-model和.sync修饰符
m0_67381422的博客
06-26 761
v-model在vue中称为语法糖,本质上是给标签属性绑定value和监听input事件,可以用作父子组件间传值 拓展需求: 子组件点击父组件的num值加1 父组件代码: 子组件代码: .sync修饰符原理: 本质和v-model语法糖一样,都是属性绑定传值,监听事件接收,不同的是监听事件是update,语法也不同......
Vue中 .sync 修饰符和v-model
weixin_43597801的博客
04-03 709
父组件将 message 的值传给子组件的，子组件中触发事件 update:xxx 需要修改父组件的 message，就可以用 .sync 修饰符简化( sync 操作符的时候。
修饰符.sync & v-model指令
web00_11的博客
08-12 170
修饰符.sync & v-model指令 修饰符.sync 的作用跟v-model 一样也是用来实现数据的双向绑定，两者的不同点在于修饰符.sync 可以绑定多次，而 v-model 只能绑定一次 修饰符.sync <Right :num.sync="numb"></Right> // 等价于 <Right :num="numb" @update:num="val => num = val"></Right> 使用 .syn.
v-model与.sync修饰符的区别
油墨香^-^的博客
07-18 147
sync与v-model区别是相同点都是语法糖，都可以实现父子组件中的数据的双向通信。区别点格式不同v-modelnum.sync@updatenumv-model只能用一次；.sync可以有多个。https。
vue中v-model和.sync修饰符的区别
weixin_57519185的博客
10-21 352
1.v-model的本质 v-model是用来在表单控件或者组件上创建双向绑定的，他的本质是v-bind和v-on的语法糖，在一个组件上使用v-model，默认会为组件绑定名为value的prop和名为input的事件。 <!--v-model写法--> <my-component type="text" v-model="value"> <!--展开语法糖后的写法--> <my-component type="text" :value="value"
11-30 v-model和.sync修饰符的区别
June_net的博客
11-29 264
.sync
vue中v-model指令与.sync修饰符的区别
weixin_43852569的博客
08-19 69
vue中v-model指令与.sync修饰符的区别前言1、pandas是什么？二、使用步骤总结 前言 1、pandas是什么？ 二、使用步骤 总结
vue中v-model和.sync修饰符区别
greed
08-22 444
两者共同点 v-model的本质 <!--v-model写法--> <my-component type="text" v-model="value"> <!--展开语法糖后的写法--> <my-component type="text" :value="value" @input="value = $event.target.value" > <!-- 默认针对原生组件input事件，但是如果子组件定义了针对事件 model: {
修饰符.sync与v-model区别
最新发布
muzidigbig的博客
03-20 964
1、相同点都是语法糖，都可以实现父子组件中的数据的双向通信。2、区别点使用格式：传值方式：注意：v-model 只能有一个；.sync 可以有多个。此外，.sync是Vue 2中的指令，而在Vue 3中，v-model取代了.sync的位置，并且可以在一个组件中使用多次。 修饰符.sync与v-model区别
组件之间用v-model.sync修饰符
04-22
v-model.sync修饰符可以实现父组件和子组件之间双向绑定的功能。在父组件中使用v-model语法糖，同时在子组件中使用props属性接收该值，并通过$emit事件来将子组件内部修改的值传递回父组件更新v-model绑定的数据。相...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值