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

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

官方解释：↓

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

看代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 这里父组件，要给子组件传一个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>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 子组件 <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'

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