导读:有时候我们只想要简单更新某个props属性值,也许是显示标志的布尔值,也许是标题title,这类只是单纯更新值的处理,写一遍传值-监听-更新就显得很冗长,这里记录一种精简版的更新props属性值的方法。
我们知道:
常规用法中,props的属性值value 在子组件中是只读的,要修改value的值只能在父组件中修改,首先在子组件中emit(事件名event,value值) 发送给父组件,然后在父组件监听到event,更新value或者其他逻辑处理,这里不做过多描述。只讨论更新props值而不需要父组件中做其他的逻辑处理。
就有一种方式可以减少我们写的代码,精简版:
子组件child.vue
props: ['isShow'],
methoed:{
close(){
this.$emit('update:isShow', false) // 关键代码
}
}
父组件parent.vue
关键代码 :propsKey.sync=“isShow”
<childv :isShow.sync="isShow" />
data(){
return{
isShow : false // 定义值
}
}
这样父组件就不用再加监听函数了!省略一个函数。
注意,如果父元素需要在监听函数中处理其他的逻辑任务,那这种精简版的不适应,还是老老实实监听处理啰。