vue props传递数组子组件获取不到

1. 问题描述
在子组件定义了srcList

 props:{
            width:Number,
            height:Number,
            name:String,
            size:String,
            srcList:Array,
            multiple:Boolean
        },

父组件传进去一个数组

<FormItem label="上传商品图" class="ivu-form-item-required">
  <uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :srcList="this.productImage"></uploadImg>
</FormItem>

这个数组在父组件是可以打印出来的,传入子组件中,子组件打印不出来,但是其他props都可以打印出来,请问是什么原因呢?

原因是:父组件中定义的这个数组默认为空,值是在created钩子函数中axios获取到的,所以传入子组件的是data里定义的空数组。

解决:子组件用watch监听里一下,输出的当前的值是数组,之前的值是空,但是组件中用到的该变量依然打印为空。此时可将把要执行的方法也放入watch 中。

 computed: {
      changeData() {
        const {columName,columData} = this
        return {
          columName,
          columData
        }
      }
    },
    watch: {
      changeData: {
        handler: function (newval, oldval) {
          this.columName = newval.columName;
          this.columData = newval.columData;

          let length = this.columName.length;
          let end = 500/length-1; // 横坐标展示5类
          let show = false;
          if(length >5){
            show = true;
          }
          this.buildChart(this.columName,this.columData,show,end);
        },
        deep: true
      }
    }
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue3 使用 props 来在父组件之间传递数据。当你需要将对象数组从父组件传到组件时,可以通过以下步骤来进行: ### 步骤一:在父组件中创建并发送对象数组 首先,在父组件中定义一个数据属性,并将其设置为你要传递的对象数组。 ```javascript export default { data() { return { itemArray: [ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }, { id: 3, name: 'Item C' } ] }; } }; ``` 然后通过 `emit` 函数向组件发送这个对象数组。 ```javascript <template> <div> <!-- 在这里可以展示一些内容或者操作 --> <child-component :items="itemArray" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { // 可以添加更多事件处理函数 } }; </script> ``` ### 步骤二:在组件中接收对象数组 接下来,在组件中接收这个来自父组件的数据。首先确保组件已经导入了 Vue 的 `props` 并接收了父组件提供的 `items` 数据。 ```html <!-- ChildComponent.vue --> <template> <ul> <li v-for="(item, index) in items" :key="index"> {{ item.name }} </li> </ul> </template> <script> export default { props: { items: { type: Array, required: true } } }; </script> ``` 在这个例中,我们使用了 `v-for` 指令遍历数组中的每个元素,并在其上绑定 `item.name` 属性显示名称。如果数组 `items` 中的元素不是数组类型或其他预期的类型,则会出现类型错误。 ### 相关问题: 1. **在 Vue 组件中如何验证 prop 是否包含有效的数据类型?** - 可以在接收 prop 的组件内使用 `props` 的 `type` 属性进行类型检查,或者在组件的 `data` 初始化时对 prop 进行类型转换或异常处理。 2. **如何在 Vue 中动态地改变 prop 的值?** - 通常通过 Vue 的响应式系统自动更新。例如,通过 `this.$emit('update:itemArray', newItems)` 更新父组件的状态。 3. **当 prop 数组过大时,如何优化性能?** - 对于大量数据,可以考虑只渲染可见部分数据,利用 `v-if` 或者分页机制减少计算负担。同时注意避免不必要的循环和 DOM 操作,比如使用虚拟列表、懒加载等技术提升性能。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值