项目场景：

前两天日常开发时，遇到需要父子组件双向绑定的问题，出现了一些BUG，但是考虑到组件的可维护性，vue中是不允许子组件改变父组件传的props值的

问题描述：

问题场景就是子组件传递数据给父组件，父组件收到并改变返回给子组件，子组件再次改变值发送给父组件，大概就是实现双向绑定，其中有一点点细节不一样

1.子组件

//子组件---一个dialog弹窗
<el-dialog:visible="visible"title="选择图片"><p class="tips">提示：以下内容来自于公众号素材管理中的图片，如需上传图片，请到公众号素材上传</p><span class="dialog-content"><div class="pic-desc"><img src="" alt=""><span>图片名称</span><a href="">选择</a></div></span><span slot="footer" class="dialog-footer"><el-button size="small" type="primary" @click="operateSure">确 定</el-button><el-button size="small" @click="operateCancle">取 消</el-button></span>
</el-dialog>
</template>
<script>
export default {name: 'pic-dialog',data () {return {visible: false}},props: {editPicDialogVisible: {type: Boolean,default: false}},watch: {editPicDialogVisible (val) {this.visible = val//this.editPicDialogVisible = !editPicDialogVisible  此写法报错，因为不允许修改props的值}}
}
</script>

2.父组件中使用

//子组件在父组件中的使用<pic-dialog :editPicDialogVisible.sync='editPicDialogVisible'></pic-dialog>//绑定button实现子组件的显示和隐藏的方法  addPicDialog () {this.editPicDialogVisible = trueconsole.log('setTrue ' + this.editPicDialogVisible)
},

原因分析：

这里出现的bug就是，点击button(调用addPicDialog方法)，出现弹窗，关闭后再次点击均为无效

通过测试发现：父组件传给子组件的editPicDialogVisible在第一次点击后一直为true，子组件的数据再未发生改变，导致无法控制子组件的显示与隐藏

那这里就需要子组件改变editPicDialogVisible的值之后再传给父组件，完成双向绑定，但是又不能直接修改props的值，所以需要使用vue.sync方法解决这个问题

解决方案：

1.子组件

//子组件---一个dialog弹窗
<el-dialog:visible="visible"title="选择图片"><p class="tips">提示：以下内容来自于公众号素材管理中的图片，如需上传图片，请到公众号素材上传</p><span class="dialog-content"><div class="pic-desc"><img src="" alt=""><span>图片名称</span><a href="">选择</a></div></span><span slot="footer" class="dialog-footer"><el-button size="small" type="primary" @click="operateSure">确 定</el-button><el-button size="small" @click="operateCancle">取 消</el-button></span>
</el-dialog>
</template>
<script>
export default {name: 'pic-dialog',data () {return {visible: false}},props: {editPicDialogVisible: {type: Boolean,default: false}},watch: {editPicDialogVisible (val) {this.visible = val}},methods: {operateCancle () {// 关闭窗口this.$emit('update:editPicDialogVisible', false)},operateSure () {// 关闭窗口this.$emit('update:editPicDialogVisible', false)// 保存数据}}
}
</script>

2.父组件中使用

//子组件在父组件中的使用<pic-dialog :editPicDialogVisible.sync='editPicDialogVisible'></pic-dialog>、//绑定button实现子组件的显示和隐藏的方法 addPicDialog () {this.editPicDialogVisible = trueconsole.log('setTrue ' + this.editPicDialogVisible)
},

欧克克，这样问题就解决啦，实现的父子组件的双向绑定，控制显示与隐藏的布尔值就是动态的，就可以多次点击button出现弹窗啦！就酱啾咪~

Vue中实现父子组件的数据的双向绑定（vue.sync的用法）相关推荐

【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
【Vue2 组件间数据的双向绑定】
组件间数据的双向绑定一.通过自定义事件二.通过v-model 三.通过.sync修饰符四.provide和inject 代码中的p-8,mt-8等,都是自己写的工具类,复制代码的同学,可以自行删 ...
VUE中的父子组件通信
VUE项目中的父子组件之间的传值. 首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的 ...
Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
vue中的父子组件传值详解
父组件与子组件传值 //父组件通过标签上面定义传值 <template> //使用子组件,在里面传输数据<main :obj="data"></mai ...
vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址前言在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...
VUE中的模板语法以及过滤器和双向数据绑定
目录: 1. 模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令 1.2.1 核心指令 1.2.1.1 v-if |v-else-if| ...
Vue 3 父子组件传递数据的几种通信方式 (Prop、自定义事件、v-model...)
Vue 3 官方文档 (中文):https://v3.cn.vuejs.org/guide/introduction.html 对比 Vue 2 的一些变化 v-on 的 .native 修饰符已被移 ...
Vue中，一个组件调用其他组件的方法（非父子组件）
Vue中,一个组件调用其他组件的方法(非父子组件) 场景--B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式 1.当前组件引入将要调用方法 ...

Vue中实现父子组件的数据的双向绑定（vue.sync的用法）

项目场景：

问题描述：

原因分析：

解决方案：

Vue中实现父子组件的数据的双向绑定（vue.sync的用法）相关推荐

最新文章

热门文章