在vue中实现父子组件数据的双向绑定实时更新

在Vue中有许多组件数据的绑定方法，但很多时候数据不能及时更新，这里介绍一种使用Vue的watch监听来实现双向绑定的方法。

这里以Vue2举例，Vue3也是差不多的写法

假设有父组件:

<template>
    <div>
        <SubComponent :prop.sync="FatherProp"/>
    </div>
</template>

<script>
import SubComponent from '.../your_path'
    components:{
        SubComponent
    },
    data(){
        return {
            FatherProp: "我是父组件的属性"
        }
    }
...
</script>

父组件通过:prop.sync向子组件传递值，sync允许子组件使用this.$emit来更新父组件的数据。

子组件:

<template>
    <div>
        子组件的值为: {{ inside_prop }}
    </div>
</template>

<script>
    name: "SubComponent",
    data(){
        inside_prop: "我是子组件内部属性";
    },
    props:{
        prop:{
            type: String,
            default: "这是外部属性没传时的默认值",
            required: false
        }
    },
    watch:{
        // 监听内部属性的变化
        inside_prop:{
            handler(inside_prop_new){
                // 将外部的属性更新
                this.$emit('update:prop',inside_prop_new);  
            },
            deep: true,
            immediate: true
        },
        
        // 监听外部属性的变化
        prop:{
            handler(outside_prop_new){
                // 更新内部的属性
                this.inside_prop = outside_prop_new;
            },
            deep: true,
            immediate: true
        }
    }
</script>

原理其实不难理解，Vue提供了sync的语法糖，在内部提供了一个临时类，它拥有公开的get和set方法，当临时数据的set方法被调用时，watch监听到set的调用，我们这时get拿到临时数据的新值，再调用内部自己的set方法去更新内部的属性。监听内部的set同理，这样就实现了一个双向绑定的作用。