vue-sync修饰符实现父子组件双向绑定父组件代码子组件 <button @click="$emit('update

父组件代码

<template>
    <div>
        <p>实现父子组件响应式</p>
        <!-- 原理：父传给子数据，子组件把新数据发给父组件，父组件再修改 -->
        <one :msg='msg' @xiuG="xiuG" />
        <!-- 简写 -->
        <one :aaa.sync='aaa'  />
        {{aaa}}
    </div>
</template>

<script>
.....
methods: {
        xiuG(newValue){
            this.msg = newValue;
        }
    },
</script>

子组件

<template>
    <div>
        {{msg}}
        <button @click="$emit('xiuG','不吃穿不愁')">修改msg</button>
        {{aaa}}
        <button @click="$emit('update:aaa','mmmmmmmmm')">修改aaa</button>
    </div>
</template>
<script>
export default {
    name:'one',
    props:['msg','aaa'],
}
</script>