sync修饰符
主要用于双向绑定父子组件的props，简化其代码量。子组件只用$emit，父组件不必绑定自定义事件，只需在传递的props后加上 .sync修饰符即可响应子组件的变化。
子组件
- template
<div class="box">
<div>当前标题： {{name}}</div>
<div>当前内容： {{content}}</div>
<div>||</div>
<button @click="changeName">点击改变标题</button>
<button @click="changeContent">点击改变内容</button>
</div>
- methods
methods: {
changeName () {
this.$emit('update:name', '标题已改变')
},
changeContent () {
this.$emit('update:content', '内容已改变')
}
}
注意！
子组件的
$emit绑定的事件名，不能随意命名，必须使用update:props的方式
父组件
- 绑定事件再改变props的值
<csync
:name="name"
:content="content"
@update:name="name = $event"
@update:content="content = $event"
></csync>
- 使用
.sync修饰符，同样的效果！一步到位！
<div>
<csync
:name.sync="name"
:content.sync="content"
></csync>
</div>
- 在传递的props为对象的时候
sync由为巴适，例如在父组件中使用事件绑定的方式:
<csync
:name="obj.name"
:content="obj.content"
@update:name="obj.name = $event"
@update:content="obj.content = $event"
></csync>
- 而使用
v-bind加sync修饰符，就是一步到位，同样的效果
<csync v-bind.sync="obj"></csync>
子组件是一直未有改变的，子组件中没有接收名为 obj 的 props， 接收的仅是 obj 的属性。
