前言 【vue|vue父子组件数据双向修改方法】vue中父子组件通信中,为了保证数据的单向流动,子组件不能直接修改父组件传进来的值,之前也一直用this.$emit调用父组件方法来修改传入的值。直到要做一个带关闭按钮的弹窗组件时,我才发现了vue的子组件可以不通过this.$emit修改props值。
案例 父组件给子组件传递时可以.sync作为修饰符,例如:给子组件传递显示或隐藏的值showImgsilder
//父组件
子组件通过props接受到showImgsilder的值后,可以在内部修改这个值,来控制该组件显隐,但是修改方式还是有点差异,实现如下
//子组件
closeImgsilder(){
this.$emit('update:showImgsilder', false)
},
原理 vue的.sync原理就是 在组件上添加updata方法如说你是个父组件就可以转化成
showImgsilder= val”>
因此子组件内部就可以直接修改传入的值了。
这样通过子组件直接修改父组件传进来的值,减少了父组件方法,整体调用该组件,就可以只通过data控制,不需要额外写方法关闭它。使得组件调用更为清爽。
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习