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

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

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


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


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


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

  ...


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


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

  


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


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

 

PS:楼主邮箱 tccwpl@163.com

目录
相关文章
|
21小时前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
2天前
|
Web App开发 编解码 JavaScript
【Vue篇】Vue 项目下载、介绍(详细版)
【Vue篇】Vue 项目下载、介绍(详细版)
10 3
|
2天前
|
JavaScript 测试技术 API
Vue3中定义变量是选择ref还是reactive?
Vue3中定义变量是选择ref还是reactive?
14 2
|
2天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
2天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
7 0
|
2天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
7 0
|
2天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
989 0
|
2天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
26 0
|
2天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口