码迷,mamicode.com
首页 > 其他好文 > 详细

彻底明白VUE修饰符sync

时间:2021-06-08 23:24:41      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:pre   直接   child   cli   匿名函数   date   来替   gif   调整   

对于VUE的初学者来讲,肯定会感觉prop的写法很麻烦,很讨厌!你肯定想如果prop也可以实现双向绑定那怎是一个爽字了得!
不过现实是残酷的,如果子组件可以任意修改父组件的内容,那势必会带来数据的混乱,从而造成维护的困扰!毕竟父组件也是有尊严的!
 

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

 

父组件代码:

<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>

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

技术图片

 

父组件代码:

<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>

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

 

—————END—————

文章转载自简书:https://www.jianshu.com/p/d42c508ea9de

 

彻底明白VUE修饰符sync

标签:pre   直接   child   cli   匿名函数   date   来替   gif   调整   

原文地址:https://www.cnblogs.com/smile-fanyin/p/14862816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!