Vue父子组件数据双向绑定，子组件可修改props

父组件 => props[parent-data] => 子组件 => watch[parent-data] => children-data = parent-data // 子组件监听父组件的改变

子组件 => $emit[children-data] => 父组件 => parant-data = children-data // 子组件通知父组件自身的改变

// 父组件
<div>
    <Children :parentData="parentData" @getChildrenStatus="getChildrenStatus"></Children>
</div>

// 父组件
data(){
    return {
        parentData: 1
    }
},
methods: {
    getChildrenStatus: function(data){ // 实时更新子组件的变化
        this.parentData = data
    }
}

//子组件
data(){
    return {
        chiildrenData: 1
    }
},
props: ['parentData']
watch: {
    parentData: function(){ // 监听父组件的变化
        this.childrenData = this.parentData
    }
}
mounted(){
    this.$emit('getChildrenStatus', this.childrenData) // 将改变通知父组件(保证父子组件数据一致)
}

 

=========================2020/01/06 16:40 编辑========================

不推荐上面的做法！这会造成数据流更加复杂，无法追踪数据的变更源头

推荐做法：

1、使用vuex，将输入存入store中维护

2、使用v-model，参考https://blog.csdn.net/m0_37728716/article/details/103860002