vue项目开发中.sync 修饰符的作用

官方解释如下：

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

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

父组件代码如下:

 这里父组件，要给子组件传一个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' 。这样就可以了，父组件就不要再去写个方法接受这个值然后再去改传的参数，使用起来还是很方便的。