defineProps

2023年10月24日

柏拉文

越努力，越幸运

一、认识

---

defineProps 作用同 props 选项相同, 用于接收数据。defineProps 是只能在 <script setup> 中使用的编译器宏。不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。

二、语法

---

2.1 标准语法

<script setup>
const props = defineProps({
  foo: String
})
</script>

2.2 默认值语法

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

三、类型声明

---

const props = defineProps<{
  foo: string
  bar?: number
}>()