彻底明白VUE修饰符sync(转载)
本文转载,仅作为记录。链接:https://www.jianshu.com/p/d42c508ea9de
对于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,简单,快捷,有档次!真好!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步