vue中,父子之间的传值称为双向绑定
在实际运用中,我们会在父组件中对子组件传过来的值被动设置一个自定义的事件
监听传过来的值
比如
父组件中:
<div>
子组件:
<child :val='testV' @transfer='onVal'/>
</div>
methods: {
ovVal (val) {
this.testV= val
}
}
子组件中:
<div>
{{val}}
修改val的值:
<button @click=amendVal/>
</div>
props:['val'],
methods:{
amendVal () {
this.$emit('transfer',newval)
}
}
`这样通过 子组件发出emit()通信, 依靠父组件的 onVal监听事件获取值, 然后在父组件中修改值,
再传给子组件,完成整个的双向通信`
然后这样的繁琐操作,让vue的官方看到了,所以官方给出了一个语法糖`.sync’
所以有了更简便的操作,省却了父组件的被动监听,可以直接在子组件中监听值
所以就有了如下操作
父组件中:
<div>
子组件:
<child :val.sync='testV'/>
</div>
子组件中:
<div>
{{val}}
修改val的值:
<button @click=amendVal/>
</div>
props:['val'],
methods:{
amendVal () {
`update:` 配合和语法糖 `.sync`使用
this.$emit('update:val',newval)
}
}
这样你在子组件中使用emit的时候就不用再去做 父组件的监听行为,同时,value的值也会随之改变
让生活更美好,更简便,新的发现,我们总在进步