defineProps 接收到参数可在template里显示，script里无法获取

是的，您说得对。`defineProps`是在组件的`setup`函数中定义props的一种方式。这些props可以在组件模板中使用，并且可以被视为响应式数据。但是，它们不能像普通的变量一样在组件的`script`部分中直接访问，必须通过`props`对象进行访问。这是因为在组件初始化时，`props`属性被“代理”到组件实例上，以便在模板中使用。如果您需要在`script`部分中访问这些数据，可以使用`toRefs`函数将其转换为响应式引用。

相关问题

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

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

1. 父组件中，首先定义一个props属性，将地址列表作为数组传给子组件。例如：

<template>
  <div>
    <child-component :address-list="parentAddresses" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentAddresses: ['地址1', '地址2', '地址3']
    }
  }
}
</script>

2. 子组件的`ChildComponent.vue`里，使用`defineProps`来声明需要接收到的属性：

<template>
  <div v-for="(address, index) in addresses" :key="index">
    {{ address }}
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    // 定义名为addressList的prop，类型可以是数组
    addressList: {
      type: Array,
      required: true
    }
  },
  computed: {
    // 访问并映射到addresses数据，通常在计算属性中处理props的数据
    addresses() {
      return this.addressList;
    }
  }
}
</script>

现在，当你在父组件中更改`parentAddresses`数组，子组件会自动更新显示的内容。

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>