JavaScript에서 컴포넌트로 데이터 전달하기

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. 이를 위해 컴포넌트 태그에 데이터가 있는 속성을 작성해야 합니다. 예를 들어, 사용자의 이름과 성을 전달해 봅시다:

App.vue<template>
  <User name="john" surn="smit" />
</template>

이렇게 전달된 데이터를 프롭스라고 합니다. 컴포넌트가 이 데이터를 받기 위해서는, props 설정에 그 이름들을 나열해야 합니다:

components/User.vue<script>
  export default {
    props: ['name', 'surn'],
    data() {
      return {
        
      }
    }
  }
</script>

이제 전달된 데이터는 하위 컴포넌트의 템플릿에서 출력할 수 있습니다:

components/User.vue<template>
  {{ name }}
  {{ surn }}
</template>