Vue-利用v-model和.sync进行父子通信

1、v-model

        通常子组件更新某个变量并需要告知父组件时，需要子组件$emit触发事件，然后父组件$on监听该事件再去改变值。

        但熟悉 v-model 的双向数据绑定原理后，我们可以巧妙地运用这一原理去实现父子组件之间动态传值：

• 父组件通过 v-model 绑定一个变量传给子组件；
• 子组件通过 props['value'] 接收；
• 子组件通过 this.$emit('input', n) 去改变父组件中v-model绑定的变量。

// 父组件
<template>
    <div>
        <Edit v-model="form" />
    </div>
</template>

// 子组件
<script>
    export default {
        name: "Edit",
        props: {
            value: Object
        },
        computed: {
            form: {
                get() {
                    return this.value;
                },
                set(n) {
                    this.$emit('input', n);
                }
            }
        },
    }
</script>

 2、sync

// 父组件
<template>
    <div>
        <Edit :myForm.sync="form" />
    </div>
</template>

// 子组件
<script>
    export default {
        name: "Edit",
        props: {
            myForm: Object
        },
        computed: {
            form: {
                get() {
                    return this.myForm;
                },
                set(n) {
                    this.$emit('update:myForm', n);
                }
            }
        },
    }
</script>