.sync修饰符的使用vue中的父子组件是单向数据流，子组件并不能直接修改父组件中传递过来的props,那么子组件如何修

vue中的父子组件是单向数据流，子组件并不能直接修改父组件中传递过来的props,那么子组件如何修改父组件中的数据呢？假设有两个组件，App.vue是父组件，Demo.vue是子组件.

//父组件App.vue  （不完整代码）
<Demo :message="n" @update:msg="n = $event"/>
data(){
    return {
        n:10000,
    }
}

Demo.vue

<span>{{message}}</span>
<button @click="changeProps">changeProps</button>

props:['message'],
methods:{
    changeProps(){
        this.$emit('update:msg',this.messsage - 10)
    }
}

.sync是一个语法糖，它可以简化上述代码

//父组件App.vue
<Demo :message.sync="n"/>
data(){
    return {
        n:10000,
    }
}

Demo.vue

<span>{{message}}</span>
<button @click="changeProps">changeProps</button>

props:['message'],
methods:{
    changeProps(){
        this.$emit('update:message',this.messsage - 10)
    }
}

总结