[Vue.js] 컴포넌트 심화

컴포넌트 안에 다른 컴포넌트 넣기

부모 컴포넌트와 자식 컴포넌트

src/components 폴더에 PageTitle.vue 생성, views 폴더에 NestedComponent.vue 생성

// PageTitle.vue
<template>
  <h2>Page Title</h2>
</template>

<template>
  <div>
    <PageTitle />
  </div>
</template>
<script>
import PageTitle from '../components/PageTitle';  // 컴포넌트 import

export default {
    components: {PageTitle}    // 현재 컴포넌트에서 사용할 컴포넌트 등록
}
</script>

컴포넌트에서 다른 컴포넌트를 사용하는 방법은 사용할 컴포넌트를 import 한 후 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록하면 된다.

import PageTitle from '../components/PageTitle';

=> PageTitle 컴포넌트를 import 한다.

components: {PageTitle}

=> 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 등록한다.

<PageTitle />

=> Html에서는 import한 컴포넌트 이름을 이용해서 태그를 만들면 된다.

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기 : Props

PageTitle을 다음과 같이 수정

<template>
  <h2>{{ title }}</h2>
</template>

<script>
export default {
  props:{
    title: {
      type: String,
      default: "페이지 제목입니다"
    }
  }
}
</script>

props에 title를 키로 갖는 오브젝트를 추가했다.

props에는 부모 컴포넌트로 전달받은 데이터가 저장이 된다. props에 정의된 키는 저장될 데이터의 타입과 부모 컴포넌트로부터 데이터가 전달되지 않았을 때의 default값을 정의한다.

<h2>{{ title }}</h2>

=> props에 정의된 키는 Vue 인스턴스의 데이터 값으로 가용되기 때문에 h2에서 이중 중괄호를 사용해서 문자열에 대한 바인딩 처리를 할 수 있다.

<PageTitle title="부모 컴포넌트에서 자식 컴포넌트로 데이터 전달"/>

=> estedComponent.vue 파일에서 사용하고 있는 PageTitle 컴포넌트에 속성으로 다음과 같이 title=”~~”을 추가한다. 여기서 지정한 title 값이, 자식 컴포넌트인 PageTitle에 정의된 Props의 title에 전달된다.

위에서 Pagetitle에는 title 값에 default로 “페이지 제목입니다”라고 지정했지만 위 처럼 title 값을 부모 컴포넌트에서 재정의 하니

새로 정의되서 사용됨.

정적/동적 props 전달

자식 컴포넌트인 PageTitle.vue로 title=”Page Title” 정적 값을 전달하는 것을 확인했다.

v-bind나 약어인 :문자를 사용해서 props에 동적인 값을 전달할 수 있다.

NestedComponent.vue

<template>
  <div>
    <page-title :title="title" />
  </div>
</template>
<script>
import PageTitle from '../components/PageTitle.vue';  // 컴포넌트 import

export default {
    components: {PageTitle}    // 현재 컴포넌트에서 사용할 컴포넌트 등록
    ,data() {
      return {
        title : "동적이다"
      };
    }
}
</script>

숫자형(Number) 전달

숫자 값을 props로 전달하기 위해서는 v-bind로만 가능하다. v-bind를 사용하지 않는 경우는 숫자가 아닌 문자값으로 전달된다.

마찬가지로 논리 자료형(Boolean), 배열, 객체 모두 v-bind를 사용하지 않으면 문자열로 전달된다.