开发时遇到这样一个需求，子组件为一个富文本编辑器，我要在父组件中给富文本编辑器传入内容，这个通过props传值来实现，但是props传值为单向传递，即在子组件中修改了富文本中的内容后，父组件中的值并不会相应发生变化，此时需要进行父子组件的双向数据绑定。解决方案为使用sync修饰符及监听事件。具体实现如下：
父组件代码：
html:
<froalaEditor :articlecontent.sync="item.froalacontent"/>
子组件代码：
html:
<froalaView v-show="showfroalacontent" v-model="sonarticlecontent"/>
// 注意这里绑定的是子组件中创建的中间变量sonarticlecontent
script：
props:{
'articlecontent':String,
},
data(){
return {
sonarticlecontent: this.articlecontent //必须用中间变量过渡一下props中的变量
}
},
watch: {
sonarticlecontent(newval) {
this.$emit('update:articlecontent', newval)
}
}
大体思路为，父组件中用.sync修饰符修饰你要在子组件中修改（即双向绑定的变量），然后在子组件中，要用一个中间变量来接收一下父组件传过来的值，即不能对props中的变量进行直接修改，会报错，之后监听这个中间变量的变化，如果监测到中间变量的值发生变化，就通过$emit触发update事件，将新的值传给父组件。
关注我的公众号获取海量vue视频教程
