vue中的.sync修饰符

 首先来看一下官网API的定义：

大概意思就是在Vue中，父子组件最常用的通信方式是通过props进行数据传递，并且只能是父到子的单向数据传递，子组件是不允许修改父组件传递过来的props的值。如果直接修改浏览器会报错。

但是有一些业务场景需要在子组件内部改变父组件传递过来的props值并更新到父组件中去，这时就需要用到.sync修饰符。

其实.sync也是一个语法糖：

// 子组件
<child :name.sync="name" ></child>

// 其实会编译成如下
<child :name="name" @update:name ="val => name = val"'></child>

// 子组件修改props值需要使用$emit
this.$emit('update:name', newValue)

下面来看一个完整的例子：控制弹窗的显示和隐藏

// 父组件

<template>
    <div id="father">
        <child :show.sync="show" ></child>
        <button @click="toggle">切换&