彻底明白VUE修饰符sync-蒲公英云

彻底明白VUE修饰符sync

https://www.jianshu.com/p/d42c508ea9de

官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！先来完成一个小功能：通过父组件按钮将子组件显示出来，如图：

aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjAxNTk3MC1lNWQyYWI2NDQ2YzZhMDY3LmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzUxMS9mb3JtYXQvd2VicA

父组件代码：

<template>
    <div>
        <input type="button" 
               value="我是父组件中的按钮" 
               @click="show">
        <child v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            }
        }
    }
</script>

子组件child代码：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
    </div>
</template>

接下来加个需求，在子组当中增加一个按钮，通过该按钮来将自已隐藏起来！需要借助父子之间的传值了！如图：

aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjAxNTk3MC01MGZiM2U3MTIxNTg3OTg4LmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzUxMS9mb3JtYXQvd2VicA

父组件代码：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child @upIsShow="changeIsShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子组件代码：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("upIsShow",false);
            }
        }
    }
</script>

如果我要将父组件中的事@upIsShow修改为@update:isShow不违法吧：

<child @update:isShow="changeIsShow" v-show="isShow"/>

子组件的emit自然也要做对应调整：

upIsShow(){
    this.$emit("update:isShow",false);
}

运行一下，一切正常！真好！

那么如果现在我将父组件的changeIsShow直接写成匿名函数，也能运行吧：

<child @update:isShow="function(bol){isShow=bol}" v-show="isShow"/>

再次运行，一切还是那么美好，真好！

现在我将那匿名函数改成箭头函数，不过分吧：

<child @update:isShow="bol=>isShow=bol" v-show="isShow"/>

再运行一次，完美，真好！

最后我将上面那行代码做最后一次修改：

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

至此终于涉及到了sync了。以上代码 :isShow.sync=”isShow”其实是 @update:isShow=”bol=>isShow=bol”语法糖。是其一种简写形式。附上完整代码。
父组件：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子组件：

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>