uni-app中uniapp-x 子组件的props如何传入一个对象数组

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app中uniapp-x 子组件的props如何传入一个对象数组
我这样自定义了一个类型，在props内传入值后打印的arr
为typeof 输出为boject类型，但是控制台打印后是数组，在view里也不能使用。

问：uniapp-x 子组件的props如何传入一个对象数组

type SwiperViewItem = {
    type : string,
    name : string,
    preload : boolean,
}

export default {
    props: {
        arr: {
            type: Array as PropType<SwiperViewItem[]>,
            default: () : Array<SwiperViewItem> => {
                return []
            }
        },
    }
}

Harmonyos Next教程
3 回复

UTSJSONObject[]


会了

在 uni-app 中，如果你希望在 uniapp-x 子组件中传入一个对象数组作为 props，你可以按照以下步骤进行。这包括父组件传递对象数组给子组件，以及子组件接收并处理这个对象数组。

父组件代码

首先，在父组件中定义一个对象数组，并通过 props 传递给子组件。

<template>
  <view>
    <uniapp-x :items="itemList"></uniapp-x>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: 'Item 1', value: 'Value 1' },
        { id: 2, name: 'Item 2', value: 'Value 2' },
        { id: 3, name: 'Item 3', value: 'Value 3' }
      ]
    };
  }
};
</script>

子组件代码（uniapp-x.vue）

在子组件中，你需要定义 props 来接收这个对象数组，并在模板或逻辑中使用它。

<template>
  <view>
    <block v-for="(item, index) in items" :key="index">
      <view>
        <text>ID: {{ item.id }}</text>
        <text>Name: {{ item.name }}</text>
        <text>Value: {{ item.value }}</text>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  // 你可以在这里添加更多的逻辑，比如对items进行处理
  computed: {
    // 示例：计算items的总长度
    totalItems() {
      return this.items.length;
    }
  },
  methods: {
    // 示例：打印items数组
    printItems() {
      console.log(this.items);
    }
  },
  mounted() {
    // 示例：组件挂载后打印items
    this.printItems();
  }
};
</script>

说明

  1. 父组件：定义了一个 itemList 对象数组，并通过 :items="itemList" 将其传递给子组件 uniapp-x。
  2. 子组件：通过 props 接收 items，它是一个对象数组。在模板中使用 v-for 指令遍历 items 并显示每个对象的属性。
  3. 默认值和类型检查：在 props 中定义了 items 的类型为 Array，并设置了默认值 []，同时标记为 required，确保传入的是数组。

这样，你就可以在 uni-app 中将对象数组作为 props 传递给子组件，并在子组件中接收和使用了。

回到顶部