在vue1.0版本的时候就有sync，但是在2.0后就去除了，当更新到 2.3.0后又发现这个功能其实挺有用的，后来又加了这个功能。那么问题来着这个修饰符是干嘛的呢？其实这个更新父组件数据的语法糖，当子组件更改了父组件传的数据，然后父组件要及时响应。
废话不多说，上代码：
<pcon :foo.sync="bar" />
如果展开来就是
<pcom :foo="bar " @update:foo="val=>bar=val" />
注：这里的“val=>bar=val”为es6的写法，表示把从子组件传过来的值赋值给bar，并返回bar，类似于：
function(val){ return bar = val }
当子组件要更新父组件的数据时候，我们只需要发送请求：
this.$emit('update:foo', newValue)
就可以更新到父组件的值。
综上所述：
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。
在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前...
vue 修饰符sync【 vue sync修饰符示例】 先看下一个参考的文章：深入理解vue 修饰符sync【 v...
在vue1.0版本的时候就有sync，但是在2.0后就去除了，当更新到2.3.0后又发现这个功能其实挺有用的，后来...
子组件 类似于vue2的.sync 修饰符
.sync修饰符 父组件 子组件 vue的数据响应式
参考文章:vue中需要注意的问题总结(上) 1.对于sync的使用 参考vue的修饰符sync 在有些情况下，我们...
Vue事件修饰符详解(转） 整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，...
Vue3的组件上v-model的用法用法示例： 相当于 vue 2 注：Vue3 v-model没有.sync修饰符
今天又翻了一下vue文档，.sync修饰符一直没有领会，今天总算弄清楚了，它允许在子组件中直接改变父组件数据，而我...
原文地址：https://juejin.im/post/5b6afe9e5188251b1f228666 sync...
本文标题：vue 修饰符sync详解
本文链接：https://www.haomeiwen.com/subject/wwviwftx.html
网友评论