Vue 2.0提供了一個新的特性,叫做sync,用于簡化父子組件之間的雙向綁定。
通常,在Vue中我們可以通過v-model來進行父子組件之間的雙向綁定。例如:
<template>
<div>
<input type="text" v-model="value">
<child-component :value="value" @input="onInput"></child-component>
</div>
</template>
<script>
import childComponent from './childComponent.vue'
export default {
data() {
return {
value: ""
}
},
components: {
childComponent
},
methods: {
onInput(val) {
this.value = val
},
}
}
</script>
在上面的代碼中,我們向子組件傳遞了一個value屬性,并監聽了子組件的input事件,來更新父組件中的value值。
使用sync,我們可以把這個過程簡化成一行代碼:
<template>
<div>
<input type="text" v-model="value">
<child-component :value.sync="value"></child-component>
</div>
</template>
這樣我們就可以不需要再監聽input事件,并且子組件的value屬性也可以直接得到更新。另外,當子組件修改value的值時,會自動觸發父組件的更新。