子组件将defineProps接收的值进行for循环解析

Question

vue3 在子组件中怎样将defineProps获取的值赋值进行解析，
父元素传递给子组件的值：beforeOption=[{"no":1,"name":"a"},{"no":2,"name":"b"}]
子组件接收：

const defProps = defineProps({
  beforeOption:{
    type:Array,
    default:[]
  },
});
const sum=ref([])

在子组件中将defProps.beforeOption进行for循环将no提取出来赋值给sum
ps：最终想要的结果sum=[1,2]

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

在 Vue 3 中，使用 defineProps 可以在子组件中接收父组件传递的 props。要将这些 props 进行解析，可以使用 JavaScript 的数组方法。

例如，在子组件中，你可以使用 for 循环来遍历 beforeOption 数组：

<template>
  <div>
    <ul>
      <li v-for="option in beforeOption" :key="option.no">
        {{ option.name }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

interface Option {
  no: number;
  name: string;
}

const props = defineProps<{
  beforeOption: Option[];
}>();

</script>

在上面的代码中，我们使用 defineProps 定义了一个名为 beforeOption 的 props，它是一个数组类型的 Option 对象。然后，在模板中，我们使用 v-for 循环遍历 beforeOption 数组，并将每个对象的 name 属性渲染到列表中。

在 TypeScript 中，我们还需要定义 Option 接口来指定 beforeOption 数组中的对象的结构。

代码解释

• defineProps 函数用于定义 props，它返回一个对象，其中包含了 props 的名称和类型。
• beforeOption 是一个 props，它是一个数组类型的 Option 对象。
• Option 接口定义了 beforeOption 数组中的对象的结构，包括 no 和 name 两个属性。
• 在模板中，我们使用 v-for 循环遍历 beforeOption 数组，并将每个对象的 name 属性渲染到列表中。

问题解决

通过上面的代码，你可以在子组件中将 defineProps 接收的值进行解析，并将其渲染到列表中。