[Vue.js] Props? Emits?

Props 선언

Vue 컴포넌트는 명시적인 props 선언을 요구하는데, 이렇게 함으로써 외부에서 컴포넌트에 props 를 넘길 때 어떤 속성이 폴 스루 속성으로 처리되어야 하는지 알 수 있다.

<script setup> 스타일의 SFC 에서는 defineProps() 메크로를 사용하여 props 를 선언 할 수 있다.

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

<script setup>을  사용하지 않는 컴포넌트 에서는 props 는 props 옵션을 사용하여 선언함.

export default {
  props: ['foo'],
  setup(props) {
    // setup()은 첫 번째 인자로 props를 받습니다.
    console.log(props.foo)
  }
}

defineProps() 에 전달하는 인자는 props 옵션에 제공하는 값과 동일함 두 선언 스타일은 동일한 props 옵션을 사용한다.

문자열 배열을 사용하여 props를 선언하는 것 외에도 객체 선언 문법을 사용할 수도 있다.

// <script setup>에서
defineProps({
  title: String,
  likes: Number
})

// <script setup>가 아닐 때
export default {
  props: {
    title: String,
    likes: Number
  }
}

객체 선언 문법의 각 객체 속성의 키는 props의 이름이 되며, 객체 속성의 값은 값이 될 데이터 타입에 해당하는 생성자 함수(Number, String 등)여야 한다.

타입을 지정하는 것은 컴포넌트를 가독성이 좋게 문서화 하는데 도움이 되며, 컴포넌트를 사용하는 다른 개발자가 잘못된 유형을 전달 할 떄에는 브라우저 콘솔에 경고를 출력함.

TypeScript 를 <script setup>과 함께 사용하는 경우, 타입스크립트의 타입 표기법을 사용하여 props를 선언 할 수도 있다.

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>