使用场景: 在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。
但是 Vue 父子通信是单向数据流,子组件不能直接修改父组件的值。(试想一下,如果某个子组件可以直接修改父组件的某个值,父组件传给其他的子组件的这个值也是修改后的值,这显然是不合理的。)
原始的父子组件传值:
这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。
父组件:
用 $event
获取 $emit
传递的第二个参数
<div>{{doc.title}}</div>
<son-1 :title="doc.title" @update:title="doc.title = $event" />
data() {
return {
doc:{
title:"标题"
}
}
},
子组件1:
<button @click="updateTitle">修改标题</button>
data() {
return {
newTitle:"新标题1"
}
},
methods: {
updateTitle(){
this.$emit("update:title", this.newTitle)
}
}
点击 修改标题
就会把父组件中渲染的 “标题” 修改成 “新标题1” 。
使用 .sync
修饰符:
为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:
父组件:
<son-2 :title.sync="doc.title" />
子组件2:
<button @click="updateTitle">修改标题</button>
data() {
return {
newTitle:"新标题2"
}
},
methods: {
updateTitle(){
this.$emit("update:title", this.newTitle)
}
}
点击 修改标题
就会把父组件中渲染的 “标题” 修改成 “新标题2” 。
注意 :带有
.sync
修饰符的v-bind
不能 和表达式一起使用 (例如:title.sync="doc.title = $event"
是无效的)。取而代之的是,你只能提供你想要绑定的 property 名,类似v-model
。
使用 .sync
修饰符设置多个 prop
:
用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:
父组件:
<div>{{doc.title}}</div>
<div>{{doc.name}}</div>
<son-3 v-bind.sync="doc" />
data() {
return {
doc:{
title:"标题",
name:"zs"
}
}
},
子组件3:
<button @click="update">修改数据</button>
data() {
return {
newDoc: {
newTitle:"新标题3",
newName:"ls"
}
}
},
methods: {
update(){
this.$emit("update:title", this.newDoc.newTitle)
this.$emit("update:name", this.newDoc.newName)
}
},
点击 修改数据
就会把父组件中渲染的 “标题” 修改成 “新标题3”,“zs” 修改成 “ls” 。