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

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

父组件

1. 父组件标签绑定数据与更新方法

<div>
    <Children :parentData="parentData" @getChildrenStatus="getChildrenStatus"></Children>
</div>

2. 父组件

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) // 将改变通知父组件(保证父子组件数据一致)
}

参考：

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