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

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

倒影

倒影 - 记忆的时间差.

我也遇到这个问题了

要回复问题请先登录注册