vue3中如何在子组件用defineProps接收父组件的地址列表信息

在Vue 3中，如果你想在子组件中通过`defineProps`接收父组件传递过来的地址列表信息，你可以按照以下步骤操作：

1. **在父组件中**，首先定义一个prop，并将其数据类型设置为数组，因为地址列表通常是一组字符串或其他可以遍历的数据。

// 父组件script部分
export default {
  props: {
    addressList: {
      type: Array,
      required: true, // 如果你不希望这是必填项，可以去掉这行
      default: () => [], // 默认值，如果父组件没有提供，则子组件会得到一个空数组
    },
  },
}

2. **在子组件模板中**，你可以直接访问这个`addressList` prop并使用它。例如，如果你想显示每个地址，可以这么写：

<template>
  <div v-for="address in addressList" :key="address">
    {{ address }}
  </div>
</template>

3. **在子组件内部**，你还可以对属性进行处理，比如添加过滤、排序等功能。记得要在`setup()`生命周期钩子中导入`useProps`以便在计算属性或watch中使用prop。

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  // ...其他props...
});

// 使用props
const filteredAddresses = computed(() => props.addressList.filter(...));
</script>