Vue的.sync修饰符的作用

以一个例子即可了解.sync修饰符的使用方式

    <div id="app">
        <zujian :test="isShow" @update:test="isShow=$event"></zujian>
        //$event可以获取$emit上传的参数，即为!test
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        Vue.component('zujian',{
            template:`
            <div>
                <p v-show="test">我显示了</p>
                这是爸爸传给我的值{{test}}
                <button @click='$emit("update:test",!test)'>点我切换</button> 
                //$emit触发事件并传参，第一个参数为字符串
            </div>
            
            `,
            props:['test']
        })
        new Vue({
            el:'#app',
            data(){
                return {
                    isShow:true
                }
            }
        })
    </script>
    //该示例会给组件'zujian'传递一个isShow值，子组件接收后根据值切换显示
    如果使用.sync修饰符的话，组件的使用值只需要改成
    
    <zujian :test.sync="isShow"></zujian>
    
    等价于
    <zujian :test="isShow" @update:test="isShow=$event"></zujian>