vue的sync双向绑定数据
解决方法:
子组件通过this.$emit('update:value', this.inlineVal)改变父组件的值,子组件通过watch监听父组件的变化更新自己的值,实现双向绑定。
父组件:
<inline-editor :value.sync="content" ></inline-editor>
子组件:
<input type="text" v-model="inlineVal" @blur="doneEdit">
props: {
value: ''
},
data(){
return {
inlineVal: '',
}
},
created: function(){
this.inlineVal = this.value;
},
watch:{
value(newValue, oldValue) {
this.inlineVal = newValue;
}
},
doneEdit: function () {
this.$emit('update:value', this.inlineVal)
}