在有些情況下舶斧,我們可能需要對一個 prop 進(jìn)行“雙向綁定”尿赚。不幸的是添忘,真正的雙向綁定會帶來維護(hù)上的問題采呐,因為子組件可以修改父組件,且在父組件和子組件都沒有明顯的改動來源昔汉。
所以官方推薦以update:my-prop-name 的模式觸發(fā)事件取而代之懈万。
一個很簡單的小例子:(子組件單擊按鈕,顯示或隱藏父組件的box)
image.png
<div id="app">
<costum-show :is-show.sync="show"></costum-show>
<div v-if="show">box</div>
</div>
<script>
Vue.component('costum-show', {
props:['isShow'],
template:`
<div>
<button @click="showHandle">顯示/隱藏</button>
</div>
`,
methods: {
showHandle(){
this.$emit("update:isShow", !this.isShow);
}
}
})
var vm = new Vue({
el:'#app',
data:{
show: false
}
})
</script>
關(guān)鍵點:
image.png