vue 子组件修改父组件变量问题

简介: vue 子组件修改父组件变量问题

昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项。


默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选。


开始没什么问题,页面都摆上去了,但是当我点击进行选择的时候,console控制器抛出异常了,提示我不能在子组件里修改父组件传递过来的值。


网上查证了一番,原因是父组件往子组件传值默认是单向绑定的,不允许在子组件修改值。

  ...


网上有些答案, 不过有点坑,最后还是问的公司的前端解决了,做法是这样的:


在子组件定义watch方法,监听父组件传递的变量的值,然后把值赋值给子组件内部自己定义的变量即可,如图:

  


watch里面的事件名称即父组件传递的变量名,参数val是变量的值,具体用法如图所示。


这样就很好的解决了子组件会修改父组件值的问题。

 

PS:楼主邮箱 tccwpl@163.com

目录
相关文章
|
2天前
|
缓存 监控 JavaScript
如何优化 Vue 的执行流程?
【10月更文挑战第2天】
91 59
|
1天前
|
JavaScript 前端开发 Java
【Vue】大悟Vue的核心之MVVM
【Vue】大悟Vue的核心之MVVM
8 1
|
1天前
|
JavaScript 前端开发 安全
如何快速上手VUE框架
如何快速上手VUE框架
6 0
|
1天前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
7 0
|
JavaScript
纯vue以及vue+laravel父组件往子组件传递图片路径
纯vue以及vue+laravel父组件往子组件传递图片路径
|
2天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
5天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
27 1
|
2天前
|
JavaScript
vue知识点
vue知识点
16 5
|
4天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
13 1
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
15 2