彻底明白VUE修饰符sync

╰半橙微兮° 2023-02-08 15:52 8阅读 0赞

[https://www.jianshu.com/p/d42c508ea9de][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不违法吧：

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

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

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

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

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

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

<child @update:isShow="bol=>isShow=bol" 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>

最后：sync只是给大家伙提供了一种与父组件沟通的思路而已！所以在后面日子里，你如果只是单纯的在子组件当中修改父组件的某个数据时，建议使用sync，简单，快捷，有档次！真好！

—————END—————

[https_www.jianshu.com_p_d42c508ea9de]: https://www.jianshu.com/p/d42c508ea9de
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjAxNTk3MC1lNWQyYWI2NDQ2YzZhMDY3LmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzUxMS9mb3JtYXQvd2VicA]: /images/20230208/8099c1805f404883bb154fa53807c962.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjAxNTk3MC01MGZiM2U3MTIxNTg3OTg4LmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzUxMS9mb3JtYXQvd2VicA]: /images/20230208/1acd7e1ad2b14f6c9caaca5a30055b1d.png