vue 子组件修改父组件变量问题
昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项。
默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选。
开始没什么问题,页面都摆上去了,但是当我点击进行选择的时候,console控制器抛出异常了,提示我不能在子组件里修改父组件传递过来的值。
网上查证了一番,原因是父组件往子组件传值默认是单向绑定的,不允许在子组件修改值。
...
网上有些答案, 不过有点坑,最后还是问的公司的前端解决了,做法是这样的:
在子组件定义watch方法,监听父组件传递的变量的值,然后把值赋值给子组件内部自己定义的变量即可,如图:

watch里面的事件名称即父组件传递的变量名,参数val是变量的值,具体用法如图所示。
这样就很好的解决了子组件会修改父组件值的问题。
vue 子组件修改父组件变量问题的更多相关文章
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- vue2.0子组件修改父组件props数据的值
从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...
- React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)
子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...
- vue 子组件修改父组件传来的props值,报错
vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- 14. VUE 子组件修改父组件的值
在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...
- vue—子组件修改父组件的值
如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...
- Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...
- vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
随机推荐
- CAD中的文本编排操作
AutoCAD中导入超文本实现方法 除了AutoCAD内含的文本输入命令外,向AutoCAD中输入多行文本即超文本的方法还有:通过Windows提供的剪贴板,利用AutoCAD提供的多行文本命 ...
- clock()函数的返回值精度问题
clock()函数返回值为1毫秒,就是0.001秒.clock函数功 能: 返回处理器调用某个进程或函数所花费的时间.用 法: clock_t clock(void);说明:clock_t其实就是lo ...
- 转】Nodejs对MongoDB模糊查询
原博文出自于: http://blog.fens.me/category/%E6%95%B0%E6%8D%AE%E5%BA%93/page/4/ 感谢! Posted: Jul 1, 2013 Tag ...
- 关于如何读取XML文件的一个简单方法
在平时开发系统功能的时候,我们经常会碰到一些需求需要经常性的发生变化,比如 系统版本.更新日志 等等.这个时候用一个XML文件来替代数据库,就会变的简便很多. 前段时候我也正好需要改个需求,是关于客户 ...
- AJPFX实践 java实现快速排序算法
快速排序算法使用的分治法策略来把一个序列分为两个子序列来实现排序的思路: 1.从数列中挑出一个元素,称为“基准“2.重新排序数列,所有元素比基准值小的摆放在基准前面,所有元素比基准值大的摆在基准的后面 ...
- P1433 吃奶酪
题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输出格式 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块 ...
- CSS综合用法
div 居中 {position: absolute; top: 50%; left: 50%; margin-top: -180px; margin-left: -160px;}
- JWT认证阐述
哥发达了,是时候实现一下儿时的梦想了,怡红院开起! 店面门脸装修如何?做生意,谁还没个镇店之宝啊?有请我的店长如花小姐! 没事哈!别怕,扭曲的五官往往都藏着一颗纯洁的心灵. 不管如何吧,我的怡红院算是 ...
- Android习惯--Activity启动方法
public void Text extends Activity{ public void static actionStart(Context context, int i, String str ...
- windows 安装绿色版mysql
(1)到官网下载绿色版mysql:http://dev.mysql.com/downloads/mysql/ (2)下载好后,放在F:\mysql,解压出来 (3)进入到mysql-5.6.19-wi ...