Vue에서 자식 컴포넌트 생성하기

컴포넌트 내부는 이전에 작업했던 기본 컴포넌트와 동일한 구조를 가집니다. 즉, 각 컴포넌트 파일에는 script 태그와 template 태그가 있을 것입니다.

예를 들어 User라는 이름의 컴포넌트를 만들어 봅시다. 해당 파일에 코드를 배치합니다:

components/User.vue<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

data 객체에는 일부 데이터를 배치할 수 있습니다:

components/User.vue<script>
  export default {
    data() {
      return {
        name: 'john'
      }
    }
  }
</script>

이 데이터는 컴포넌트의 템플릿에서 출력할 수 있습니다:

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

이제 우리가 생성한 컴포넌트를 기본 컴포넌트에 연결해 보겠습니다. 먼저 이를 가져옵니다:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    
  }
</script>

components 옵션에 그 이름을 등록합니다:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    components: {
      User
    }
  }
</script>

부모 컴포넌트의 템플릿에서 자식 컴포넌트의 템플릿을 출력할 수 있습니다. 이를 위해 컴포넌트 이름과 일치하는 태그를 작성해야 합니다. 해봅시다:

App.vue<template>
  <User />
</template>