修饰符v-model与.sync有哪些区别
导读:本文共2816字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、v-model1. 作用相信过使用过vue框架的朋友对这个指令不会感到陌生,v-model是用来进行<input>、<textarea>、<select>元素上数据的双向绑定的。例如:<template><div><inputv-model="value"type=&q... ...
一、v-model
1. 作用
相信过使用过vue框架的朋友对这个指令不会感到陌生,v-model是用来进行<input>
、<textarea>
、<select>
元素上数据的双向绑定的。
例如:
<template><div><inputv-model="value"type="text"/>//这里的v-model里面的value可以直接获取到用户的输入值</div></template><script>exportdefault{components:{},data(){return{value:"",//这里定义的value变量可以直接将上面获取到的值进行操作};},}</script><stylescoped></style>
当我们在input框里输入了某个值的时候,下面data里的value就可以直接后去到我们输入的值,而不需要操作dom元素进行获取。
1. 本质
v-model本质上来说是一个语法糖,我们习惯性的写法是这样的:
<inputv-model="value"type="text"/>
但是实际上完整的写法是这样的:
<input:value="value"@input="value=$event.target.value"type="text"/>
通过对比语法糖和原始写法可以得出:再给<input/>
元素添加v-model属性时,默认会把value作为元素的属性,然后把input
事件作为实时传递value的触发事件。
注意:不是所有能进行双向数据绑定的元素都是input事件!
3、特殊用法
一般情况下,我们使用v-model主要是用于数据的双向绑定,可以十分方便的获取到用户输入的值,但在某些特殊情况下,我们也可以将v-model用于父子组件之间数据的双向绑定。
<template><divclass="father"><Sonv-model="str"/></div></template><script>importSonfrom'@/components/Son.vue';//引入子组件exportdefault{components:{Son},data(){return{str:"father"};},}</script>
这里定义了一个father组件和son组件,并且将son组件引入到father组件中,给son组件绑定了v-model进行了传值。此时我们需要在son组件中接收并使用这个值:
<template><divclass="son">我是在son组件里接收到的值:{{value}}</div></template><script>exportdefault{components:{},props:{value:{type:String,},},}</script>
注意:这里接受的值必须是value,写成其他名字将会报错!
父组件向子组件传值,子组件中是不能直接修修改数据的,直接修改的话就会报错
当我们需要修改这个值时,就需要再将其传入到父组件中修改。
这就需要在父组件中的子组件上定义一个自定义事件,通过子组件$emit('自定义事件名称','值')
的方法将值传入父组件。
但是在这里我们不能使用自定义事件,因为我们用的是v-model传值,所以我们只能使用input事件进行修改。
子组件中使用$emit()
方法.调用父组件中的事件,并且进行传值
<template><divclass="son">我是在son组件里接收到的值:{{value}}<button@click="handleClick">click</button></div></template><script>exportdefault{components:{},data(){return{str:'son'};},props:{value:{type:String,},},methods:{handleClick(){this.$emit('input',this.str)}},}</script>
这样就完成父子组件之间的数据双向绑定效果
二、.sync修饰符
1、作用
.sync修饰符可以实现父子组件之间的双向绑定,并且可以实现子组件同步修改父组件的值,相比较与v-model
来说,sync
修饰符就简单很多了:
2、本质
//正常父传子<Son:a="num"/>//加上sync之后的父传子<Son:a.sync="num"/>//它等价于<Son:a="num"@update:a="val=>a=val"/>//相当于多了一个事件监听,事件名是update:a,//回调函数中,会把接收到的值赋值给属性绑定的数据项中。
这里面的传值与接收和正常的父组件向子组件传值没有区别,唯一的区别在于子组件往回传值的时候$emit所调用的事件名必须是update:属性名
,事件名写错不会报错,但那时也不会有任何改变,这点需要注意。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
修饰符v-model与.sync有哪些区别的详细内容,希望对您有所帮助,信息来源于网络。