在說(shuō)vue 修飾符sync前，我們先看下官方文檔：vue .sync 修飾符序六，里面說(shuō)vue .sync 修飾符以前存在于vue1.0版本里逗旁，但是在在 2.0 中移除了 .sync 立宜。但是在 2.0 發(fā)布之后的實(shí)際應(yīng)用中眷篇，我們發(fā)現(xiàn) .sync 還是有其適用之處萎河，比如在開發(fā)可復(fù)用的組件庫(kù)時(shí)。我們需要做的只是讓子組件改變父組件狀態(tài)的代碼更容易被區(qū)分蕉饼。從 2.3.0 起我們重新引入了 .sync 修飾符公壤，但是這次它只是作為一個(gè)編譯時(shí)的語(yǔ)法糖存在。它會(huì)被擴(kuò)展為一個(gè)自動(dòng)更新父組件屬性的 v-on 監(jiān)聽器椎椰。
示例代碼如下：
<comp :foo.sync="bar"></comp>
會(huì)被擴(kuò)展為：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
當(dāng)子組件需要更新 foo 的值時(shí)，它需要顯式地觸發(fā)一個(gè)更新事件：
this.$emit('update:foo', newValue)
猛一看不明白沾鳄，下邊我么通過(guò)一個(gè)實(shí)例（彈窗的關(guān)閉事件）來(lái)說(shuō)明這個(gè)代碼到底是怎么運(yùn)用的慨飘。
<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默認(rèn)初始值是{{show}}，所以是顯示的</p>
<button @click.stop="closeDiv">關(guān)閉</button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //觸發(fā) input 事件译荞，并傳入新值
}
}
})
export default{
data(){
return{
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
動(dòng)態(tài)效果如下：
vue 修飾符sync的功能是：當(dāng)一個(gè)子組件改變了一個(gè) prop 的值時(shí)瓤的，這個(gè)變化也會(huì)同步到父組件中所綁定。如果我們不用.sync吞歼，我們想做上面的那個(gè)彈窗功能圈膏，我們也可以props傳初始值，然后事件監(jiān)聽篙骡，實(shí)現(xiàn)起來(lái)也不算復(fù)雜稽坤。這里用sync實(shí)現(xiàn)，只是給大家提供一個(gè)思路糯俗，讓其明白他的實(shí)現(xiàn)原理尿褪，可能有其它復(fù)雜的功能適用sync。
作者：littleTank
鏈接：http://www.reibang.com/p/6b062af8cf01
來(lái)源：簡(jiǎn)書
簡(jiǎn)書著作權(quán)歸作者所有得湘，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處杖玲。
