liuxy
liuxy
  • 发布:2019-06-04 14:51
  • 更新:2019-11-07 18:02
  • 阅读:18576

uni-app 请教一个父组件更新传递到子组件的props的问题

分类:uni-app

我在一个index.vue页面使用了这样两个组件

<template>  
	<view>  
		  
		<test-slot>  
			<test-props @change_number="change_number" :x="x"></test-props>  
		</test-slot>  
		  
	</view>  
</template>  
  
<script>  
	import TestProps from "@/components/test_props.vue";  
	import TestSlot from "@/components/test_slot/test_slot.vue";  
	  
	export default {  
		components: {  
			TestProps,  
			TestSlot,  
		},  
		data() {  
			return {  
				x: false,  
			}  
		},  
		methods: {  
			change_number() {  
				this.x = true  
			},  
		}  
	}  
</script>

test-props:

<template>  
	<view>  
		<view style="height: 200upx;width: 750upx;background-color: #00B26A;" @tap="change" v-if="!x">点我</view>  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {  
				  
			};  
		},  
		props: {  
			x: {  
				type: Boolean,  
				default: function() {  
					return false  
				}  
			},  
		},  
		methods: {  
			change() {  
				this.$emit('change_number');  
			}  
		},  
	}  
</script>

test-slot:

<template>  
	<view>  
		<slot></slot>  
	</view>  
</template>

当我在test-props组件中,使用emit触发change_number事件后,请求更改x的值时,会报这样一个错误:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "x"  
14:24:30.246 found in  
14:24:30.286 ---> components/test_props  
14:24:30.306 components/test_slot/test_slot  
14:24:30.326 pages/index/index

请问我该如何修改x的值,而不会报这个warn呢?

HbuilderX版本:1.9.11
自定义组件模式
安卓,IOS均会报错

2019-06-04 14:51 负责人:无 分享
已邀请:
1***@163.com

1***@163.com - 做一个开心努力的开发者。

props接收的值如果需要向子组件传值需要使用计算属性,不然会报错

<template>
<view class="info-wrap" v-for="item in self_list">
   <article-item :item="item"></article-item>
 </view>
</template>
import item from '@/item.vue'
<script>
export default {
props: {
list: {
   type:Object
  },
},
computed:{
  self_list(){
   return this.list;
  }
 },
}
</script>

2***@qq.com

2***@qq.com

本人在百度小程序上遇到这个问题,其他端(微信小程序和h5没有遇到)。希望官方早日修复问题。目前解决方法是父组件调用子组件的函数去修改子组件内部的值。可以实现相同效果,就是麻烦。本来好好的自动更新数据就更新不到了。
例子:

  
this.$ref.childComponent.someMethod(...params)
ilijiayin

ilijiayin

HbuilderX版本:1.9.11以上版本,同样遇到这个问题

1***@qq.com

1***@qq.com - 一句话,干,遇见问题就干他,干不了他,找办法

我也遇到这个问题
官网的解释是不能修改props的值,
可是你也没有更改props中的值
搞了很久还是没搞清楚什么问题
兄弟,你搞好了没有

  • liuxy (作者)

    并没有弄好,暂时放下了,这个报错在1.9.9版本是没有的,等下看后续更新会不会有相关的内容吧,官方人员也没有人回复,就很难受


    2019-06-09 09:06

  • i***@126.com

    回复 liuxy: vue中修改也是会报错的,官方的解释是为了防止子组件修改父组件的属性后引发数据混乱.


    2020-07-01 16:33

DCloud_UNI_HT

DCloud_UNI_HT

bug 已经修复,请使用最新版本的 HBuilderX 测试

  • a***@163.com

    什么时候解决呢?


    2019-06-20 14:22

  • 1***@qq.com

    卧槽 这都是bug?vue的单项数据流,不允许更改props里的值,在data里设置个值来接受props就好了啊


    2019-06-26 09:47

scream_leen

scream_leen

同样遇到该问题, 只是在父组件修改子组件绑定prop的值, 没有在子组件修改prop, 也会报修改了prop 的警告

skysowe

skysowe

哈哈,同样遇到跟各位一样的问题,不过只是警告,好像代码还是可以继续执行的,所以我还是继续用hbx2.01打包了程序,等官方出修正

7***@qq.com

7***@qq.com

同样碰到了,不影响代码,应该是bug

倒影

倒影 - 记忆的时间差.

我也遇到这个问题了

该问题目前已经被锁定, 无法添加新回复