彻底明白VUE修饰符sync
对于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，简单，快捷，有档次！真好！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-09-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录