Vue.js defineProps

1 개요[ | ]

Vue.js defineProps()

JavaScript

Copy

const props = defineProps({
  foo: String
})

typescript

Copy

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

typescript

Copy

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

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

2 TypeScript[ | ]

html

Copy

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

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

html

Copy

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

html

Copy

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

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

typescript

Copy

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

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

typescript

Copy

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 참고[ | ]