Vue의 컴포넌트 심화(중첩 컴포넌트)

중첩 컴포넌트 사용 방법

• 자식 컴포넌트로 활용한 컴포넌트를 만들기
• 부모 컴포넌트에서 자식 컴포넌트 import

// 부모 컴포넌트
<template>
  <child-component ref="child_component" />
</template>
<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  }
};
</script>

 

 

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

• 자식 컴포넌트에서 props를 지정해줘야 함(type, default 등)
  • 아래의 코드는 title이라는 props를 부모 컴포넌트로부터 받겠다는 의미를 가짐
  • 만약 props가 없을 경우 default를 title로 사용

// component/pageTitle.vue
<template>
  <h2>{{ title }}</h2>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "page title"
      
      // 추가 유효성 검사
      required: true,
      validator: function (title) {
        return ['a', 'b'].indexOf(title) !== -1
    },
  },
};
</script>

 

• 부모 컴포넌트에서 데이터 넘겨주기(이 때 자식 컴포넌트의 title과 이름이 같아야 함)

// views/NestedComponents.vue

<template>
    <PageTitle title="부모에서 내려준 props" />
</template>

<script>
import PageTitle from "../components/PageTitle.vue";
export default {
  components: { PageTitle },
};
</script>

 

 

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

• 자식 컴포넌트는 정적 데이터 전달할 때와 같은 구조를 가짐
• 부모 컴포넌트에서 동적으로 전달할 data() 정의
• v-bind 디렉티브를 활용해서 props를 전달

<template>
  <div>
    <PageTitle v-bind:title="title" />
  </div>
</template>

<script>
import PageTitle from "../components/PageTitle.vue";
export default {
  components: { PageTitle },

  data() {
    return {
      title: "부모에서 내려준 props",
    };
  },
};
</script>

 

 

v-bind를 사용하지 않고 정적으로 props를 넘겨주면 모두 문자열로 인식하게 된다.
따라서 number나 boolean, 객체, 배열 등의 값은 모두 v-bind로 전달해야 함!