0
点赞
收藏
分享

微信扫一扫

前端vue中的v-model与.sync修饰符的区别


🚀作者简介

​主页:水香木鱼的博客

专栏:Vue.js

能量:🔋容量已消耗1%,自动充电中…

笺言:用博客记录每一次成长,书写五彩人生。

📒技术聊斋

在日常开发的过程中,​​v-model指令​​​是经常用到的,一般来说 ​​v-model 指令​​​在表单及元素上创建双向数据绑定,但 v-model 本质是​​语法糖​​。

但提到语法糖,这里就不得不提另一个与​​v-model​​​有相似功能的双向绑定语法糖了,这就是 ​​.sync修饰符​​。

(一)v-model

1. 作用

相信使用过vue框架的朋友对这个指令不会感到陌生,v-model是用来进行​​<input>​​​、​​<textarea>​​​及 ​​<select>​​ 元素上数据的双向绑定的 例如:

<template>
<div>
<input v-model="value" type="text"> //这里的v-model里面的value可以直接获取到用户的输入值
</div>
</template>

<script>import son from '@/yanshi/son.vue'
data() {
return {
value: '' //这里定义的value变量可以直接将上面获取到的值进行操作
}
}
}</script>

当我们在input输入框里面输入了某个在值的时候,下面就可以直接获取到我们的输入值,而不需要操作dom元素进行获取

2.v-model的本质

v-model的本质上来说,是一个语法糖

目前咱们习惯性的写法是这样的:

<input v-model="val" type="text">

但是实质上的完整写法:

<input :value="val"  @input="val=$event.target.value" />

也可以将@input后面写成一个函数,然后在methods中进行赋值操作。

要理解这行代码,首先你要知道 input 元素本身有个input 事件,这是 HTML5 新增加的,类似 onchange ,每当输入框内容发生变化,就会触发 input 事件,把最新的value值传给传递给val ,完成双向数据绑定的效果 。

我们仔细观察语法糖和原始语法那两行代码,可以得出一个结论:

在给​​ <input />​​​元素添加 ​​v-model​​ 属性时,默认会把 val作为元素的属性,然后把input事件作为实时传递 value 的触发事件

注意: 不是所有能进行双向绑定的元素都是input事件。

3. v-model的特殊用法

一般情况,咱们使用v-model主要是用于数据的双向绑定,可以十分方便的获取到用户的输入值。但在某些特殊情况下,我们也可以​​将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>

这里咱们先定义了一个​​father组件​​​和一个​​son组件​​​,并且​​将son组件引入到father组件​​中,并且给son组件绑定了v-model进行了传值。

此时,我们需要到son组件中接收这个值并且使用他:

<template>
<div>
我是son组件里面接收到的值: {{ value }}
</div>
</template>

<script>export default {
props: {
value: {
type: Number,
required: true
}
}
}</script>

注意: 我们这里​​接收的值必须是value​​,写成其他名字将无法使用

一般情况下的父向子传值,子组件中是不能直接修改的,在这里我们在子组件中直接修改这个值会进行报错

例如:

<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修饰符​​就简单很多了:

​.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:属性名 ,事件名写错不会报错,但是也不会有任何的改变,这点需要多注意。

总结

.sync与v-model区别是
相同点:都是语法糖,都可以实现父子组件中的数据的双向通信。
区别点:格式不同:v-model=“num”, :num.sync=“num”
v-model:@input + value :num.sync: @update:num
另外需要特别注意的是: v-model只能用一次;.sync可以有多个。

木鱼谢语:感谢各位技术大牛们的点赞👍收藏🌟,每一期都会为大家带来快速适用于业务的文章,让大家做到cv即可。


举报

相关推荐

0 条评论