组件间通信高级--使用sync修饰符实现父子组件数据同步

属性修饰符sync

        组件通信方式的一种，可以实现父子组件数据同步

        不使用sync修饰符实现父子组件数据同步

//不使用sync修饰符
//------------父组件------------//
<template>
    <div>
        小明的爸爸现在有{{money}}元
        <Child :money='money'  @update:money='money = $event'/>
        // :money 父组件给子组件传递props
        // @update:money 给子组件绑定的自定义事件，名字叫update:money
    </div>
</template>
<script>
    import Child from './Child.vue'
    export default{
        data(){
            return{
                money:10000    
            }
        },
        components:{Child}
    }
</script>

//------------子组件 Child.vue------------//
<template>
    <div>
        <span>小明每次花100元</span>
        <button @click='$emit('update:money',money-100)'>花钱</button>
        爸爸还剩{{money}}元
    </div>
</template>
<script>
    export default{
        props:['money']
    }
</script>

        使用sync修饰符实现父子组件数据同步

//使用sync修饰符
//------------父组件------------//
<template>
    <div>
        小明的爸爸现在有{{money}}元
        <Child :money.sync='money' />
        // :money.sync  第一 父组件给子组件传递props money
        //第二 给当前子组件绑定了一个自定义事件，而且事件名称即为update:money
    </div>
</template>
<script>
    import Child from './Child.vue'
    export default{
        data(){
            return{
                money:10000    
            }
        },
        components:{Child}
    }
</script>

//------------子组件 Child.vue------------//
<template>
    <div>
        <span>小明每次花100元</span>
        <button @click='$emit('update:money',money-100)'>花钱</button>
        爸爸还剩{{money}}元
    </div>
</template>
<script>
    export default{
        props:['money']
    }
</script>