vue父子组件双向数据绑定问题解决方案

  开发时遇到这样一个需求，子组件为一个富文本编辑器，我要在父组件中给富文本编辑器传入内容，这个通过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视频教程