Vue.js defineProps

1 개요

Vue.js defineProps()

const props = defineProps({
  foo: String
})

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

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

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

2 TypeScript

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})

props.foo // string
props.bar // number | undefined
</script>

<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}

const props = defineProps<Props>()
</script>

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

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

import type { PropType } from 'vue'

import type UserInfo from '@/types/UserInfo'

defineProps({
  userInfo: { type: Object as PropType<UserInfo>, required: true },
  size: { type: Number, default: 18 },
})

3 같이 보기

• Vue.js defineEmits

4 참고

• https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
• https://vuejs.org/guide/typescript/composition-api.html#typing-component-props