Vue 컴포넌트 재활용하기 & Prop

 

컴포넌트 안에 다른 컴포넌트 사용하기

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

<template>
  <div>
    //Html에서는 import한 컴포넌트 이름을 이용해서 태그를 만들면 된다.
    <PageTitle />
  </div>
</template>
<script>
  //PageTitle 컴포넌트를 import
  import PageTitle from '../components/PageTitle';
  export default {
    //현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 등록
    components: { PageTitle }
  }
</script>

 

 

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

자식 컴포넌트

<template>
  <h2>{{ title }}</h2>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "제목입니당~"
    }
  }
}
</script>

부모 컴포넌트

<template>
  <div>
    <PageTitle title="부모가 전달한 제목이지롱"/>
  </div>
</template>
<script>
  import PageTitle from '../components/PageTitle';
  export default {
    components: { PageTitle }
  }
</script>

 

정적/동적 Prop 전달

v-bind나 약어인 :를 사용해 prop에 동적인 값을 전달 가능

<page-title: title="title" />

data() {
	return {
    	title: '동적 타이틀;
    };
}

 

 

숫자형 전달

숫자형을 prop로 전달하기 위해서는 v-bind로만 가능. v-bind 안쓰면 문자로 전달됨

<blog-post :likes="42" />

 

 

논리 자료형(Boolean)전달

v-bind를 사용해야 한다. v-bind를 사용하지 않으면 문자열로 전달된다.

<blog-post :is-published="true" />

 

 

배열(Array) 전달

v-bind를 사용해야 한다. v-bind를 사용하지 않으면 문자열로 전달된다.

<blog-post :comment-ids="[123,234,234]" />

 

 

Object 전달

v-bind를 사용해야 한다. v-bind를 사용하지 않으면 문자열로 전달된다.

<template>
	<blog-post v-bind="post" />
</template>
<script>
	export default {
    	data() {
        	return {
            	post: {id:1, title: '아우 덥다.'}
            }
        }
    }
</script>

 

 

Prop 유효성 검사

자식 컴포넌트에서 props 옵션을 정의할 때 - 전달받는 데이터 타입, default, required 여부, 유효성 검사 함수(validator)를 통해 유효성을 검사할 수 있다.