vue .sync修饰符,vue中v-model作用
在正常开发中，经常会用到一些亲子组件通信，比如props、vuex等。下面这篇文章主要介绍v-model和的区别的相关信息。vue里的同步修改器，有需要的可以参考一下。
目录
前言1。垂直模式1。功能2。v-model 3的精髓。V-Model 2的特殊用法。1的功能。同步修改器2。sync修改器的本质总结。sync和V-Model的区别在于
前言
在日常开发过程中，经常使用v-model指令。一般来说，v-model指令在表单和元素上创建双向数据绑定，但v-model的本质是语法糖。但是说到语法糖，这里就不得不提另一个与v-model功能相似的双向绑定语法糖，就是.sync修饰符。下面是这两种用法的总结：
一、v-model
1. 作用
相信用过vue框架的朋友不会对这个指令感到陌生。v-model用于双向绑定输入、textarea和select元素上的数据。
例如：
模板
差异
input-model= value type= text //这里的v-model中的值可以直接得到用户的输入值。
/div
/模板
脚本
从 @/yanshi/son.vue 导入儿子
data() {
返回{
Value: //这里定义的Value变量可以直接操作上面得到的值。
}
}
}
/脚本
当我们在输入输入框中输入一个现有的值时，我们可以直接获得我们的输入值，而不需要操作dom元素来获得它。
2.v-model的本质
本质上，v型是一个语法糖。
目前，我们习惯性的写作方式如下：
输入v-model=val type=text
但本质上，完整的写作：
input:value= val @ input= val=$ event . target . value /
也可以在@input后面写一个函数，然后在方法中执行赋值操作。
要理解这行代码，首先需要知道input元素本身有一个input事件，这是HTML5中新加入的，类似于onchange。每当输入框的内容发生变化时，就会触发输入事件，将最新的value值传递给val，从而完成双向数据绑定的效果。
我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：
在给input/element添加v-model属性时，val会默认作为元素的属性，然后输入事件会作为触发事件实时传递值。
注意：不是所有能进行双向绑定的元素都是input事件。
3. v-model的特殊用法
一般我们使用v-model主要是为了数据的双向绑定，获取用户的输入值非常方便。但是在一些特殊情况下，我们也可以使用v-model进行父子组件之间的双向数据绑定。这里需要用到父子价值转移的相关知识：
模板
差异
son-model= num //使用子组件
/div
/模板
脚本
从 @/Yanshi/son . vue //导入子组件
导出默认值{
组件：{
Son //寄存器子组件
},
data() {
返回{
数量：100
}
}
}
/脚本
在这里，我们首先定义一个父组件和一个子组件，将子组件引入父组件，并将v-model绑定到子组件来传递值。此时，我们需要在son组件中接收这个值并使用它：
模板
差异
是在我的儿子组件中接收的值：{{ value }}
/div
/模板
脚本
导出默认值{
道具：{
值：{
类型：数量，
必填：真
}
}
}
/脚本
注意：我们这里收到的值必须是value，用其他名字写的时候不能用。
一般情况下的父向子传值，子组件中是不能直接修改的，在这里我们在子组件中直接修改这个值会进行报错
例如：
模板
差异
是在我的儿子组件中接收的值：{{ value }}
按钮@click=value=1 单击我的值1/按钮
/div
/模板
错误信息
当我们需要修改这个值时，我们需要将它传递给父组件进行修改。
这就需要在父组件的子组件标签上定义一个自定义的事件，通过在子组件中使用$emit(自定义事件名,值)的方法将值传入父组件
这里不能使用自定义事件，因为我们使用v-model来传递值，所以只能使用输入事件来修改。
在父组件中定义一个@input方法，然后设置一个参数val来接收子组件的值。
模板
差异
{{ num }}
son v-model= num @ input= val=num=val /
/div
/模板
在子组件中使用$emit()方法。调用父组件中的事件并传递值。
模板
差异
是在我的儿子组件中接收的值：{{ value }}
Button @ click= $ emit (input ，value1)单击我的值1/button
/div
/模板
这样就可以完成父子组件之间的双向数据绑定效果，不会出现错误。
二、.sync修饰符
1. .sync修饰符作用
与垂直模型相比，同步修改器要简单得多：
.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
2. .sync修饰符本质
//正常亲子传播：
son :a=num :b=num2/son
//添加sync后，父级传递给子级：
son:a . sync= num b . sync= num 2 /son
//它相当于
儿子
:a=num @update:a=val=num=val
:b= num 2 @ update:b= val=num 2=val /son
//相当于多了一个事件监视器。事件名称为update: a .在回调函数中，接收到的值将被赋给由属性绑定的数据项。
在这里传递值和从正常的父节点接收值给子节点没有区别。唯一的区别是，在传回值时，$emit调用的事件名必须是update: attribute name。如果事件名称写得不正确，它不会报告错误，但不会改变任何事情。这需要更多的关注。
总结
.sync与v-model区别是
相同点:两者都是语法糖，可以实现亲子组件中数据的双向交流。
区别点:不同的格式：v-model="num "，num.sync="num "
垂直模型：@输入值
:数量.同步：@更新：数量
另外需要特别注意的是：v-model只能用一次；.sync可以有多个。
关于v-model和的区别这篇文章就到这里了。vue中的同步修改器。有关v-model和之间差异的更多信息。同步修改器，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。