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

分类：uni-app

uniapp bug已修复

我在一个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 负责人:无分享

9 个回复

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

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


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

ilijiayin

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

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

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

liuxy (作者)

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

2019-06-09 09:06
i***@126.com

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

2020-07-01 16:33