[Vue.js] tutorial - 12. Props

📍Props

- 자식 컴포넌트는 props를 통해 부모 컴포넌트로부터 데이터를 받을 수 있다

- 먼저 props를 선언해야 한다

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

 

- msg props는 자식 컴포넌트의 <template> 블럭에서 사용 가능

- defineProps의 반환값을 통해서 JS(<script>)에서 접근도 가능

- 부모 컴포넌트에서 props를 자식 컴포넌트에 전달할 때는 어트리뷰트 형태로 전달한다

- 동적인 값을 전달할 때는 v-bind를 사용하여 전달한다

<!-- App.vue -->
<ChildComp :msg="greeting" />