【随手小记】子组件更新props精简版

导读:有时候我们只想要简单更新某个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 // 定义值
	}
}

这样父组件就不用再加监听函数了!省略一个函数。
注意,如果父元素需要在监听函数中处理其他的逻辑任务,那这种精简版的不适应,还是老老实实监听处理啰。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值