vue3 父子组件传值 , 子组件props接收数组数据,怎么处理, 怎么使用, 怎么遍历, 怎么使用计算属性处理 怎么赋值到其他空数组

首先，在父组件中通过props将数组数据传递给子组件。在子组件中，使用计算属性来处理数据。为了遍历数组数据，可以使用v-for指令，将每个数组项都渲染到页面上。接着，将计算属性处理后的数组值赋值到其他空数组中，即可实现父子组件传值，并在子组件中对数组数据进行处理和遍历。示例代码如下：

在父组件中：

<template>
  <div>
    <child-component :dataList="dataList"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      dataList: ['item1', 'item2', 'item3']
    }
  }
}
</script>

在子组件中：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    dataList: { type: Array, default: [] }
  },
  computed: {
    processedData() {
      // 在计算属性中对数组数据进行处理
      return this.dataList.map(item => item.toUpperCase());
    }
  },
  mounted() {
    // 将计算属性处理后的数组值赋值到其他空数组中
    this.$emit('processedData', this.processedData);
  }
}
</script>