Vue.sync修饰符与this.$emit(‘update:xxx‘, newXXX)
Vue中的数据是单向数据流:父级 prop 的更新会向下流动到子组件中,但是反过来则不行,即子组件无法直接修改父组件中的数据。但我们常常会遇到需要在子组件中修改父组件数据的场景。.sync修饰符就可以帮助我们实现这种功能。
·
一、.sync修饰符的作用
Vue中的数据是单向数据流:父级 prop 的更新会向下流动到子组件中,但是反过来则不行,即子组件无法直接修改父组件中的数据。
但我们常常会遇到需要在子组件中修改父组件数据的场景。.sync修饰符就可以帮助我们实现这种功能。
.sync
修饰符 this.$emit('update:title', newTitle)
Vue通过prop进行双向数据绑定。子组件数据变化,一般只能通过 this.$emit(func, val) 回调父组件函数来传值给父组件。
Vue2.3版本引入sync,作为一个事件绑定语法糖,当子组件触发事件时,父组件会响应事件并实现数据更新。
二、不使用.sync修饰符的写法
父组件:
<template>
<div>
<parent-comp :is-show="detailVisible" @update:isShow="func" />
</div>
</template>
<script>
export default {
methods: {
func (val) {
this.detailVisible = val
}
}
}
</script>
子组件:
onClose () {
this.$emit('update:isShow', false)
}
注意:this.$emit()中update后的字段要与父组件中保持一致
三、使用.sync修饰符的写法
父组件:
<parent-comp :visible.sync="isShow"></parent-comp>
子组件:
props: {
visible: {
type: Boolean,
default: false
}
},
methods: {
// 子组件触发函数
handleClose() {
this.$emit('update:visible', false)
}
}
更多推荐
所有评论(0)