TS中父传子，子中对传递过来的数据做条件设置（设置默认值，可选项）

<script setup lang="ts">  
import { defineProps } from 'vue'  
  
type SonProps = {  
  house?: string // 传过来的数据必须是 house 且类型为 string，加问号表示可选项  
}  
  
// 使用 defineProps 宏来定义 props  
const props = defineProps<SonProps>()  
  
// 如果需要默认值，可以在模板或计算属性中处理  
// 例如，在模板中直接使用 props.house || '茅草屋'  
// 或者在 setup 函数中创建一个计算属性或响应式 ref  
  
// 使用计算属性  
const computedHouse = computed(() => props.house || '茅草屋')  
  
// 或者使用 ref（虽然对于 props 来说通常不需要）  
// const houseRef = ref(props.house || '茅草屋')  
// 注意：上面的 ref 用法是不推荐的，因为 props 是响应式的，不需要用 ref 包裹  
</script>  
  
<template>  
  <div>  
    <!-- 使用计算属性或直接在模板中提供默认值 -->  
    <p>{{ computedHouse }}</p>  
    <!-- 或者直接使用 props，并提供默认值 -->  
    <p>{{ props.house || '茅草屋' }}</p>  
  </div>  
</template>