vue2中的.sync修饰符用法详解
更新时间：2025年05月17日 09:33:02 作者：小妖666
这篇文章主要介绍了vue2中的.sync修饰符用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue2的.sync修饰符用法
vue2 中实现双向数据绑定的方式有两种，一个是v-model，一个是.sync修饰符。它们的区别是一个标签或者组件上，v-model只能使用一次，而.sync修饰符可以使用多次。
在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们会遇到一些场景，需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.sync修饰符。
看案例吧
- Father.vue
<template>
<div class="hello" style="background-color: azure;">
--------------Farther-------------<br>
{{ msg }}
<button @click="handleMsg">changeMsg</button>
<Child :msg="msg" />
</div>
</template>
<script>
import Child from '../views/Child.vue';
export default {
name: 'Father',
components: {
Child
},
data() {
return {
msg: 'unchanged msg',
}
},
methods: {
handleMsg() {
this.msg = "The news of the father's change"
}
}
}
</script>- Child.vue
<template>
<div class="hello">
--------------Child----------------<br/>
{{ msg }}
<button @click="handleMsg">changeMsg</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
msg: String,
},
methods: {
handleMsg() {
// eslint-disable-next-line vue/no-mutating-props
this.msg = "The news of the child's change"
}
}
}
</script>
点击子组件的 changeMsg，消息变更，但是控制台报错
另一个环境下，也报错但是只有子组件消息变更
使用 .sync 时
- Father.vue
<Child :msg.sync="msg" />
- Child.vue
handleMsg() {
this.$emit('update:msg', "The news of the child's change");
}点击后，消息变更，并且控制台没有报错。
.sync 修饰符实现原理
.sync 修饰符也是一种语法糖，用于实现双向数据绑定，但它的实现方式与 v-model 有所不同。
- 当使用 :msg.sync="msg" 时，等价于 :msg="msg" @update:msg="msg = $event"
- 父组件使用 :msg.sync 将属性传递给子组件，并监听 update:msg 事件。子组件使用 $emit('update:msg', newValue) 来更新父组件的属性。
因为是在父组件更新值，所以就不是在子组件更新 prop 值了。
- Father.vue
<Child :msg="msg" @update:msg="childMsg"/>
childMsg() {
this.msg = "The news of the child's change"
}- Child.vue
<button @click="handleMsg">changeMsg</button>
handleMsg() {
this.$emit('update:msg', "The news of the child's change");
}v-model 实现原理
v-model 是一种语法糖
当使用 v-model="msg" 时，等价于 :msg="msg" @input='msg=$event'
父组件使用 :msg="msg" 将属性传递给子组件，并监听 input 事件。子组件使用 props 的 value 属性接收值，并使用 $emit('input ', newValue) 来更新父组件的属性。
- Father.vue
<template>
<div class="hello" style="background-color: azure;">
--------------Farther-------------<br>
{{ msg }}
<button @click="handleMsg">changeMsg</button>
<Child v-model="msg"/>
</div>
</template>
<script>
import Child from '../views/Child.vue';
export default {
name: 'Father',
components: {
Child
},
data() {
return {
msg: 'unchanged msg',
}
},
methods: {
handleMsg() {
this.msg = "The news of the father's change"
}
}
}
</script>- Child.vue
<template>
<div class="hello">
--------------Child----------------<br/>
{{ value }}
<button @click="handleMsg">changeMsg</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
value: String,
},
methods: {
handleMsg() {
this.$emit('input', "The news of the child's change");
}
}
}
</script>- 等同于
<Child :value="msg" @input="msg=$event"/>
在Vue2中，一个组件只能有一个v-model。 .sync 支持多个props的双向绑定
Vue3中，v-model支持参数化绑定，替代.sync的功能，例如：
<child v-model:name="userName" v-model:age="userAge" />
Vue 3中不再推荐使用.sync，转而用带参数的v-model。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue中，组件是构建页面的基本单位。通过组件化开发，可以提高代码的复用性和可维护性。组件的注册方法包括全局注册和局部注册两种方式。同时，需要注意组件名的命名规范、组件选项的定义方式、组件之间的通信等问题，以实现更好的组件复用和开发效率2023-05-05
这篇文章主要介绍了Vant 中的Toast设置全局的延迟时间操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue+ESLint 配置保存 自动格式化代码的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了el-table实现转置表格的示例代码(行列互换),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
这篇文章主要介绍了vue页面引入three.js实现3d动画场景操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue 处理异步加载顺序问题之如何在Konva中确保文本在图片之上显示
在处理Konva中的异步加载顺序问题时,确保在图像加载完成后再添加其他元素是关键,通过将回调函数放在imageObj.onload中,并正确处理变量捕获,我们可以确保文本总是绘制在图片之上,这不仅解决了显示顺序的问题,也为未来的调试提供了明确的方向,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要给大家介绍了关于浅入深出Vue之组件使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了Vue实现二维码的展示及下载功能,其中downloadQRCode（）函数中的url为要下载的文件的路径,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
这篇文章主要介绍了在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-05-05
最新评论