组件传值中 .sync修饰符和v-model的的区别
在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单、 及 元素上创建双向数据绑定,但 v-model 本质是语法糖。但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是.sync修饰符。在这里就两者的使用进行一下个人的总结:
相信使用过vue框架的朋友对这个指令不会感到陌生,v-model是用来进行 当我们在 v-model的本质上来说,是一个 目前咱们习惯性的写法是这样的: 但是实质上的完整写法 也可以将 要理解这行代码,首先你要知道 input 元素本身有个input 事件,这是 HTML5 新增加的,类似 onchange ,每当输入框内容发生变化,就会触发 input 事件,把最新的value值传给传递给val ,完成双向数据绑定的效果 。 我们仔细观察语法糖和原始语法那两行代码,可以得出一个结论: 在给 注意: 不是所有能进行双向绑定的元素都是 一般情况,咱们使用v-model主要是用于数据的双向绑定,可以十分方便的获取到用户的输入值。但在某些特殊情况下,我们也可以将v-model用于父子组件之间数据的双向绑定。这里需要用到父子传值的相关知识,不是特别懂的可以去vue官网进行学习,闲话不多说,上代码: 这里咱们先定义了一个father组件和一个son组件,并且将son组件引入到father组件中,并且给son组件绑定了v-model进行了传值。 此时,我们需要到son组件中接收这个值并且使用他 注意: 我们这里接收的值必须是value,写成其他名字将无法使用 这个是页面中呈现出来的效果,是可以进行正常显示的 一般情况下的父向子传值,子组件中是不能直接修改的,在这里我们在子组件中直接修改这个值会进行报错 例如 错误信息 当我们需要将修改这个值时,就需要再将其传入父组件进行修改。 这就需要在父组件的子组件标签上定义一个自定义的事件,通过在子组件中使用 在这里我们不能使用自定义的事件,因为我们用的是 父组件中定义一个 子组件中使用 这样的话,就可以完成父子组件之间的数据双向绑定效果,并且不会出现报错 相比较与 .sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。 这里面的传值与接收与正常的父向子传值没有区别,唯一的区别在于往回传值的时候 通过上面的叙述,对于.sync修饰符与v-model的相同点和不同点我们可以进行一波总结 .sync与v-model区别是 相同点: 都是语法糖,都可以实现父子组件中的数据的双向通信。 区别点: 格式不同。 v-model="num", :num.sync="num" v-model: @input + value :num.sync: @update:num 另外需要特别注意的是: 一、v-model
1. 作用
<input>
、<textarea>
及 <select>
元素上数据的双向绑定的 例如:<template> <div> <input v-model="val" type="text"> //这里的v-model里面的value可以直接获取到用户的输入值 </div> </template> <script> import son from '@/yanshi/son.vue' data() { return { val: '' //这里定义的value变量可以直接将上面获取到的值进行操作 } } } </script> 复制代码
input
输入框里面输入了某个在值的时候,下面就可以直接获取到我们的输入值,而不需要操作dom元素进行获取2.v-model的本质
语法糖
<input v-model="val" type="text"> 复制代码
<input :value="val" @input="val=$event.target.value" /> 复制代码
@input
后面写成一个函数,然后在methods
中进行赋值操作,这里就不再过多说了<input />
元素添加 v-model 属性时,默认会把 val作为元素的属性,然后把input
事件作为实时传递 value 的触发事件input
事件,这点在vue的官网也有说明3. v-model的特殊用法
<template> <div> <son v-model="num"/> //使用子组件 </div> </template> <script> import son from '@/yanshi/son.vue' //引入子组件 export default { components: { son //注册子组件 }, data() { return { num: 100 } } } </script> 复制代码
<template> <div> 我是son组件里面接收到的值: {{ value }} </div> </template> <script> export default { props: { value: { type: Number, required: true } } } </script> 复制代码
<template> <div> 我是son组件里面接收到的值: {{ value }} <button @click="value+=1">点我value+1</button> </div> </template> 复制代码
$emit('自定义事件名',值)
的方法将值传入父组件v-model
进行的传值,所以我们只能使用input
事件进行修改@input
方法,再设置一个形参val
接收子组件的传值,<template> <div> {{ num }} <son v-model="num" @input="val=>num=val" /> </div> </template> 复制代码
$emit()
方法.调用父组件中的事件,并且进行传值<template> <div> 我是son组件里面接收到的值: {{ value }} <button @click="$emit('input',value+1)">点我value+1</button> </div> </template> 复制代码
二、.sync修饰符
1. .sync修饰符作用
v-model
来说,sync
修饰符就简单很多了:2. .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,回调函数中,会把接收到的值赋值给属性绑定的数据项中。 复制代码
$emit
所调用的事件名必须是update:属性名
,事件名写错不会报错,但是也不会有任何的改变,这点需要多注意。总结
v-model
只能用一次;.sync
可以有多个。
作者:执念581
链接:https://juejin.cn/post/7020347286374842399