vue的.sync用法，使props的单向数据流变为双向数据流

起源：

.sync这个修饰符，平时用的没那么多，直到有次发现子组件中的数据，除了需要来源于父组件中传来的值，还需要子组件本身的单击修改props自身的值，这样一来子组件中的数据来源就不止父组件的传值，还有自身的传值修改了。

印象中vue文档中是有这样一个api存在的，后来一查，果然存在，这个.sync实现了prop的双向绑定，当子组件改变了一个带.sync的prop的值时，这个变化也会同步到父组件当中去，但这破坏了单向数据流。（数据自上而下流，事件自下而上走）这也就是为什么vue官方文档推荐以 update:myPropName 的模式触发事件取而代之。
**********例如：

• 在父组件中：

<child :show="isShow" @update:show="val => isShow = val">

• 在子组件中：

this.$emit("update:show", newVal);

---

在这种情况下，显得未免有些累赘了，这时候vue修饰符大法登场！！！一个.sync让你轻松实现～～～～

• 在父组件中：

<child :show.sync="isShow"></child>

需要注意的是：带有.sync的v-bind不能和表达式一起使用，(例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。

另外：

当我们用一个对象同时设置为多个prop的时候，也可以使用.sync和v-bind将这个对象的各个属性分发绑定到上面

<text-document v-bind.sync="doc"></text-document>

这个时候会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

---

今天的分享就到这里啦～～～～
最近工作有点忙，没时间发博了，好多要总结的东西，先记小本本上，哭唧唧??