vue .sync修饰符的实例

.sync的作用是：让子组件优雅的修改父组件的data
实例：弹窗的开关

父组件传递一个布尔值show决定子组件弹窗的开关

<product-list @add='add' :show.sync='showModal' :checked='tableData2' />

showModal为父组件data，

由于vue不能在子组件直接修改props传过来的简单类型的值
经常用触发事件的方式修改父组件的值。

.sync让然这边变得简单
在子组件触发关闭的方法

this.$emit('update:show', false)

这里就可以修改父组件showModal的值为false

原理是父组件会被编译为

<product-list @add='add' :show='showModal'  @update:show="val => showModal = val"   :checked='tableData2' />