VUE开发中.sync 修饰符的作用

其实这个修饰符就是vue封装了  子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法，但是子组件emit时要加上update

官方解释：↓

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

看代码：

// 这里父组件，要给子组件传一个title的值
<template>
    <div>   
        <t-title :title.sync="fatherTitle"></t-title>
    </div>
</template>
<script>
import tTitle from './blocks/list';
export default {
    name: 'test1',
    components: {  tTitle },
    data() {
        return {
            fatherTitle: '父组件给的标题'
        };
    },
}
</script>

　　这时候当我们在子组件内部的方法想去修改这个标题

// 子组件
<template>
    <div>
        <h3>{{ title }}</h3>
        <button @click="changeTitle">改变</button>
    </div>
</template>
<script>
export default {
    props:{
        title: {type: String, default: '默认值11'}
    },
    methods: {
        changeTitle() {
            this.$emit("update:title", "子组件要改自己的标题");
        }
    }
};
</script>

这里关键就是emit里的参数要写成'update'+ ':' +'要修改的props'

　　这样就可以了，父组件就不要再去写个方法接受这个值然后再去改传的参数，是不是很方便