美文网首页
Vue父组件传给子组件数据,子组件得不到数据解决方法

Vue父组件传给子组件数据,子组件得不到数据解决方法

作者: 小李不小 | 来源:发表于2024-04-14 21:30 被阅读0次

    父组件向子组件传数据,子组件无法的得到对应数据,也就是子组件console.log(this.dataPicture)打印得不到数据

    https://blog.csdn.net/m0_49714202/article/details/125910716

    第一种方案

    (1)数据为 数组 时候

    当父组件是要传给子组件的数据为 数组 的时候 用数组判断大于0,加在挂载父组件上的子组件上面
    v-if=“dataPictureList.length >0” 按钮如下

    父组件

    <homePicture :dataPicture='dataPictureList' v-if="dataPictureList.length >0">

    data () {
    return {
    dataPictureList: [],
    }
    }

    子组件

    props: {
    dataPicture: {
    type: Array,
    default: () => ({})
    }
    },

    (2)数据为 对象 时候

    当父组件是要传给子组件的数据为 对象 的时候 用数组判断大于0,加在挂载父组件上的子组件上面
    v-if=“Object.keys(dataPictureList).length >0”
    注意 :对象是 Object.keys(dataPictureList)这个大于0
    数组用数组长度就行:dataPictureList.length 这个大于0

    相关文章

      网友评论

          本文标题:Vue父组件传给子组件数据,子组件得不到数据解决方法

          本文链接:https://www.haomeiwen.com/subject/orirxjtx.html