3***@qq.com
3***@qq.com
  • 发布:2019-04-03 11:44
  • 更新:2023-12-05 15:06
  • 阅读:14962

请问uni-app自定义组件,子组件声明周期中无法获取 props 值为数组的情况

分类:uni-app
首先是引入组件的页面 index.vue
<template>  
       <view>  
               <marquee-left :sendVal="marqueeL" sendt='传过来的文字'></marquee-left>  
       </view>  
</template>
<script>  
        import uniMarqueeLeft from '@/h5Components/uni-marquee-left.vue';  
export default {  
        data() {  
        return {  
            marqueeL:null  
        };  
    },  
        components:{  
        "marquee-left":uniMarqueeLeft,  
    },  
        created(){  
               //这里我 请求 后台 成功,为marqueeL赋值为一个数组  
               // 类似下面这个:  
                [{place: "来自南通市的", name: "陈女士"},  
        {place: "来自厦门市的", name: "赵先生"},  
        {place: "来自烟台市的", name: "韩先生"},  
        {place: "来自天津市的", name: "张先生"},  
        {place: "来自南昌市的", name: "孙女士"},  
        {place: "来自中山市的", name: "姜先生"},  
        {place: "来自兰州市的", name: "黄女士"},  
        {place: "来自石家庄市的", name: "周女士"},  
        {place: "来自珠海市的", name: "尤先生"}]  
        }  
}  
</script>
然后组件页面 h5Components ---> uni-marquee-left.vue
<template>    
        <view class="uni-list" v-for="(item,index) in sendVal"  :key='index'  ref='marqL'>  
        {{item.place}}<text class="uni-uname">{{item.name}}</text>  
    </view>   
</template>
<script>  
    export default {  
        name:'uni-marquee-left',  
        props:{       
            sendVal:Array,  
            sendt:String  
        },  
        data() {  
            return {  
            }  
        },   
        created:function(){  
            console.log(this.sendVal)        //在这里我就访问不了传过来的数组,就算是在mounted里面也访问不了。  
            console.log(this.sendt)                         
        },  
                mounted(){  
                       console.log(this.$refs)     //这里为空对象,但是展开又有值。为什么都挂载好了,还是访问不了???  
                },  
        methods:{  
        }  
    }  
</script>

问题:

  • 在组件页面访问不了sendVal 的值,一直为null 。mounted生命周期也访问不了,然后this.$nextTick()也还是 访问不了,为什么???
  • 但是如果sendVal的值 不是 通过请求获得,而是 本地的数据,那么就能获取到。为什么???
  • 为什么除了array或者object类型的,都能在created 里面访问???
  • 为什么 在mounted里面 访问this.$refs 是空对象,但是里面又有内容???不是都挂载好了吗
2019-04-03 11:44 负责人:DCloud_UNI_YRJ 分享
已邀请:

最佳回复

DCloud_UNI_YRJ

DCloud_UNI_YRJ

在子组件的生命周期里,获取到的都是同步数据。如果是异步数据,需要自行监听数据变化,可以使用watchcomputed

snans

snans

我也遇到这个问题,现在解决了。

当组件属性props类型为String、Number时在页面onLoad等生命周期中赋值正常,当类型为Array或Object时赋值失败

分析如下(具体原理还需高人指点):

  • 我把每个生命周期都打印验证了一下,发现当属性类型是Array或Object时,在组件内部,无论你写在哪个周期里,这个属性的传值动作似乎都变成了异步,即便页面渲染完成,他的赋值操作都可能还没执行完;
  • 所以你把赋值操作写在子组件的data(){}created(){}mounted(){}里最终会获取不到值就是这个道理。

我的解决方案其实很简单:

把属性props需要赋值的参数在computed里引用成本地变量。
因为computed监控着数据更新,所以就算你渲染时他的值还没变,但一旦他的异步操作执行完毕,这个值就会变了。

点击参考《汇总一些遇到的奇奇怪怪的开发问题(vue3版本为主)》中标题为“自定义组件中json格式的props不能直接赋值给data(){}中的内部变量”的部分

1***@qq.com

1***@qq.com

2019-04-03 提的问你题,现在还有,什么破团队

z***@aliyun.com

z***@aliyun.com

我也是这个问题。写死的数据可以用。后台请求的就报错了

  • DreamWork

    后台请求的数据,加载完毕之后才传入的,需要在组件中监听传入数据的变化

    2019-06-18 17:01

  • 降龙十八掌

    回复 DreamWork: 求监听例子

    2021-03-31 16:15

1***@qq.com

1***@qq.com

给 marqueeL赋值 的时候看看赋值的类型,多数是字符串型 JSON.parse()用这个方法转换成对象,应该就可以了

5***@qq.com

5***@qq.com

请问解决了吗?

7***@qq.com

7***@qq.com - awow

请问解决了吗?

井

我也遇到这个问题了,打印this,可以看到传过来的来props是有值的,但是打印props就打印不出来。感觉是个bug呢。
然后我watch监听props传过来的值,然后在监听事件里面赋值data值

w***@qq.com

w***@qq.com

我也是这个问题,最新版的HbuildX,props值传过来,但在子件中将该值无法赋值给其他值,赋值后显示所undefined

w***@163.com

w***@163.com

在computed中可以拿到传过来得props

fjy1012

fjy1012

props里的数据申明如下,数据是数组类型时建议默认值申明用value,数组类型申明默认值用default会报错,其他数据类型如Object也有这样的问题。

  • 1***@qq.com

    props:{

    list:{

    type:Array,

    default:()=>[]

    }

    },

    2020-03-05 15:38

9***@qq.com

9***@qq.com

请问这个问题有解决吗?

yourbusiness

yourbusiness

同求解答,通过 props 传递过来的父组件数据无法获取

  • 3***@qq.com

    只能将所有的props合并成一个对象传入

    2020-02-27 13:32

  • 8***@qq.com

    大佬 怎么解决得

    2020-03-13 16:33

8***@qq.com

8***@qq.com

大佬 解决没有

LiYaoHui

LiYaoHui

这个问题解决了没有?

2***@qq.com

2***@qq.com

:sendVal="marqueeL" sendt='传过来的文字'
这个参数sendVal的marqueeL为null,没有值;
这个也需要属性绑定 :sendt;
之所以没有在子组件获得参数,应该就是没有传值和没有属性绑定

u***@163.com
刘翠

刘翠 - 翠来

{{normalizedSize}}
<script>  
    export default {  
        props: ['size'],  
        computed: {  
            normalizedSize: function () {  
                return this.size.toLowerCase()  
            }  
        }  
    }  
</script>
  • 刘翠

    父子组件生命周期有顺序,created里拿不到,父组件onLoad里的内容

    2023-11-29 16:14

要回复问题请先登录注册