vue3、ts 项目中,组件<houseCard v-for="i in 10" :key="i" :houseCardData="cardData"/> <script>const cardData = ref<Array<object>>([{id:1,name:'二手房'},{id:1,name:'租房'}]);</script> 组件页面<script setup lang="ts"> import { onMounted, ref } from 'vue' export interface cardDataProps { } const props = withDefaults(defineProps<HouseCardData>(), { })</script> 如何接收这个对象值
时间: 2024-03-02 19:52:57 浏览: 176
在组件页面的 `<script setup>` 中,你可以使用 `defineProps` 来声明 `props` 对象,并指定其类型为 `HouseCardData`:
```
<script setup lang="ts">
import { onMounted, ref, defineProps } from 'vue'
interface HouseCardData {
id: number;
name: string;
}
const props = defineProps<HouseCardData>({
houseCardData: {
type: Array as () => Array<HouseCardData>,
required: true
}
});
const cardData = ref(props.houseCardData);
onMounted(() => {
console.log(cardData.value);
});
export default {
props,
setup() {
return {
cardData
}
}
}
</script>
```
在上面的代码中,我们使用 `defineProps` 来声明 `props` 对象,并指定其类型为 `HouseCardData`。我们还在 `setup` 函数中创建了一个 `ref` 对象,将传递进来的 `houseCardData` 值赋值给它。最后,我们使用 `onMounted` 钩子函数输出一下 `cardData` 的值,以验证是否成功接收到传递进来的值。在导出组件时,我们将 `props` 对象添加到组件的配置中。
阅读全文