對于VUE的初學者來講抑诸，肯定會感覺prop的寫法很麻煩谍椅，很討厭趴荸！你肯定想如果prop也可以實現(xiàn)雙向綁定那怎是一個爽字了得！不過現(xiàn)實是殘酷的中跌，如果子組件可以任意修改父組件的內容，那勢必會帶來數(shù)據(jù)的混亂菇篡，從而造成維護的困擾漩符！畢竟父組件也是有尊嚴的！
官方推薦使用一種update:my-prop-name 的模式來替代事件觸發(fā)驱还，目的是為了優(yōu)雅而不粗魯?shù)膶崿F(xiàn)父子組件間的雙向綁定嗜暴！先來完成一個小功能：通過父組件按鈕將子組件顯示出來凸克，如圖：
父組件代碼：
<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);
}
運行一下虫啥，一切正常！真好奄妨！
那么如果現(xiàn)在我將父組件的changeIsShow直接寫成匿名函數(shù)涂籽，也能運行吧：
<child @update:isShow="function(bol){isShow=bol}" v-show="isShow"/>
再次運行，一切還是那么美好砸抛，真好评雌！
現(xiàn)在我將那匿名函數(shù)改成箭頭函數(shù)，不過分吧：
<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只是給大家伙提供了一種與父組件溝通的思路而已杯聚！所以在后面日子里臼婆，你如果只是單純的在子組件當中修改父組件的某個數(shù)據(jù)時，建議使用sync幌绍，簡單颁褂，快捷，有檔次傀广！真好颁独！
