vue中v-model原理和sync修饰符

最新推荐文章于 2023-06-29 18:34:28 发布
最新推荐文章于 2023-06-29 18:34:28 发布
阅读量251 收藏
点赞数
分类专栏： v-model 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happysmartgirl/article/details/109448530
版权

我们都知道vue中v-model是双向数据绑定，一般用在表单input框中，其实v-model可以用在组件中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
	<!--两种方法等同-->
		<test-model v-model="num" :num="num"></test-model>
		<!--<test-model :num="number" @ch="number = $event"></test-model>-->
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.component('test-model',{
//如果不写这段代码，视图可以改变，但是vue实例中的数据不会改变
	model:{
		value:'num',//默认值是value
		event:'change'//默认事件是input
	},
	props:['num'],
	template:`<button @click='$emit("change",100)'>{{num}}</button>`
})
const vm = new Vue({
	el:"#app",
	data:{
		num:0
	}
})
</script>
</html>

再来看一下sync修饰符
会自动派发一个update事件

	<!-- <test-sync  :num.sync="num"></test-sync> -->
	<test-sync  @update:num='num=$event' :num='num'></test-sync>

Vue.component('test-sync',{
	props:['num'],
	template:`<button @click="$emit('update:num',300)">{{num}}</button>`
})
happysmartgirl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中sync修饰符的原理和作用
Celester_best的博客
07-07 827
子组件修改父组件变量的两种方式 sync修饰符的使用以及原理
v-model实现原理和sync修饰符
^_^
06-25 281
一、v-model语法糖 input 我们知道v-model能够实现双向绑定，其实他是一个语法糖 <input type="text" v-model="message" /> 如果不用v-model 用下面的方法仍然能够实现双向数据绑定 <input type="text" :value="message" @input="message = $event.target.value" /> :value="message" 是用来绑定message变量的值，通..
.sync修饰符的原理和使用
weixin_48816102的博客
06-07 1816
.sync的使用
vue篇-v-model原理、v-model修饰符
liumuye88888的博客
05-30 553
v-model其实是一个语法糖,相当于两个指令的集合 (v-bind绑定一个value属性,v-on:input给当前元素绑定一个input事件) <input type="text" name="" id="" v-model='message'> <input type="text" :value = "message" @input = "message = $event.target.value"> ...
v-model与.sync修饰符的区别
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
06-30 605
在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖。但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符。在这里就两者的使用进行一下总结:一、v-model1. 作用相信使用过vue框架的朋友对这个指令不会感到陌生,v-mod...
v-model和.sync
weixin_45636381的博客
05-24 601
1.v-bind:属性，v-on：事件 2.v-bind:属性，v-on：udpate：属性 3.v-bind:属性.sync 4.v-model
V-model 和 .sync
gu2022_3_5_21_23的博客
11-27 235
v-model 本质 是 :value 和 @input 的语法糖 在子组件上使用就相当于把子组件当成一个输入框，只要 v-model绑定的值，子组件用value 属性 可以得到，如果是文本框在change事件内调用 this.$emit(‘input’，data) 即可完成数据同步。.sync 本质是 v-bing 和 @update 的语法糖 相比v-model 优点是在同一子组件标签上可以写多个。v-model不光可以实现表单输入之间的双向绑定，还可以实现组件之间的数据绑定。
详解VUE自定义组件中用.sync修饰符与v-model的区别
08-27
主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中的.sync修饰符用法及原理详解
lz678的博客
03-12 656
1、不使用.sync时 //父组件给子组件传入一个函数 //se6的写法 <MyFooter :age=“age” @setAge="(res)=> age = res"/> //子组件通过调用这个函数来实现修改父组件的状态。 mounted () { console.log(this.$emit(‘setAge’,1234567)); } 2、使用.sync时 //父组件将ag...
简述vue中.sync修饰符的原理
qq_42651173的博客
06-24 361
作用 .sync是一个语法糖，可以实现父子组件数据之间的双向绑定，与v-model类似，但是在写法上进行了简化。 原理 v-model原理 <com1 v-model="num"></com1> 等价于 <com1 :value="num" @input="(val)=>this.num=val"></com1> .sync原理 // 正常父传子： <com1 :a="num" :b="num2"></com1&gt.
v-model 和 .sync修饰符的区别
xiaoyugan000的博客
07-04 499
vue框架中 v-model一般用于在表单元素中进行双向数据绑定。v-model指令本质上是一个语法糖。语法糖的大概意思就是 是一种更加方便的写法，在不影响其功能的情况下。增加可读性，减少出错率。更加方便使用。一般我们通过下面的例子使用v-model指令实现双向数据绑定 下面是实际上完整的写法： input元素本身有个input事件，是HTML5新加的。每当输入框内容发生变化，就会触发input事件，把最新的value值（$event.target.value）传给val。这就是双向数据绑定。注意：
vue中修饰符.sync与v-model的区别
m0_58861443的博客
08-12 368
vue中修饰符.sync与v-model的区别 sync的作用 实现父子组件之间的数据绑定 一个组件上可以有多个.sync修饰符 工作原理 //正常父传子 <com1 :a="num" :b="num2"></com1> // 加上sync之后父传子： <com1 :a.sync="num" .b.sync="num2"></com1> // 它等价于 <com1 :a="num" @update:a="val=>n
vue v-model与.sync详解
暴走的山交君的博客
12-05 328
用过vue的小伙伴应该都知道，使用表单绑定值的时候，我们通常会用到一个 v-model 指令，它可以在表单以及元素上面创建双向数据绑定 1、但是其实 v-model 是一个语法糖，它真的是实现是这样的： 2、相信用 v-mode 绑定绑定表单，大家都非常熟悉，但是 v-model 还有一个作用，可以用于父子组件之间数据的双向绑定。 成功修改value的值3、.sync修饰符作用.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。 不使用.sy
VueJS中v-model和.sync详解
k19970320j的博客
02-21 936
v-model v-model其实就是一个语法糖，绑定value事件，监听input事件。v-model默认会将value属性传递给子组件，并且会监听input事件，实现双向数据绑定 index.vue <template> <div> <k-input v-model="msg"></k-input> // v-model就是下...
vue中的v-model 与 .sync
weixin_55690518的博客
08-12 83
.sync与v-model的相同点和区别是 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。 区别点： 格式不同。 v-model="num", :num.sync="num" v-model： @input + value :num.sync: @update:num v-model只能用一次；.sync可以有多个。 .sync 相当于绑定了自定义属性a，和一个自定义事件@upadte:a 父组件 <template> <div>..
来瞧一瞧v-model和.sync的使用
m0_67464753的博客
06-07 195
1：.sync可以实现父子组件数据之间的双向绑定，与v-model类似。 2：都是语法糖，都可以实现父子组件中的数据的双向通信。1：一个组件上只能有一个v-model，.sync修饰符可以有多个。 2： 格式不同。 v-model=“num”, :num.sync=“num”。 ①：v-model： @input + value ②：:num.sync: @update:num .sync修饰符的原理 示例...
v-model和.sync详解和区别
Jolly_zhang的博客
06-29 846
v-model和.sync详解和区别
vue3 v-model 的原理
最新发布
09-08
vue3 v-model的原理是生成一个属性和一个事件，用于实现双向数据绑定。当使用v-model指令时，它会根据指令所在的标签类型自动选择合适的属性和事件来绑定。例如，对于<input>标签，v-model会自动创建一个value属性和一个input事件；对于<textarea>标签，v-model会创建一个value属性和一个input事件；对于自定义组件，v-model可以使用.sync修饰符来实现类似的功能。在组件内部，通过监听input事件或者手动更新value属性的值来实现数据的双向绑定。当用户改变输入框的值时，input事件会触发，将新的值更新到value属性上；而当value属性的值发生变化时，会通过触发input事件将新的值传递给组件的父组件。这样，就实现了数据在组件内外的双向同步。 在vue3中，v-model的实现原理与vue2相似，但是也存在一些区别。具体来说，vue3中的v-model指令可以通过使用v-bind指令结合v-on指令来实现双向绑定。例如，可以使用v-bind:value和v-on:input来实现<input>标签的双向绑定。此外，vue3还引入了一个新的修饰符.sync，可以简化自定义组件的v-model使用。通过在子组件上使用v-model指令并添加.sync修饰符，可以实现父组件与子组件之间的双向数据绑定。当子组件改变v-model绑定的值时，会自动更新父组件中相应的属性值；反之，当父组件中的属性值改变时，子组件也会相应更新。总之，vue3的v-model原理依然是通过生成属性和事件来实现数据的双向绑定，但使用方式和细节上有一些不同。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值