[Vue.js] Component

1) 컴포넌트 구성

<template>
html, 디렉티브, 바인딩
</template>
<script>
  데이터 모델 , 동적 처리
</script>
<style>
   css 적용
</style>

 

2) 컴포넌트 적용

<templte>
<Header/>
</templte>

<script>
import Header from './Header.vue';
</script>

3) 컴포넌트 간 데이터 전달

1) props로 부모컴포넌트에서 자식컴포넌트로 데이터 전달

//자식 컴포넌트
Vue.component('ChildComponent' , {
props:['message'],
template: '<div>
  {{message}}
</div>'
})

//부모 컴포넌트 
<child-component v-bind:props_name='부모가 전달할 데이터'></child-component>

 

4) $.emit() 메서드로 자녀 컴포넌트에서 부모 컴포넌트로 데이터 전달

 <script>
//자식 컴포넌트
   ...
   methods:{
     sendMessage() {
       this.$emit('myevent', parameter); 
       //myEvent는 특정 이벤트가 발생했을 때 동작하는 메서드
       //parameter는 자식이 부모에게 전달할 데이터
     }
   }
   
//부모컴포넌트
   <child-component v-on:myevent="receiveMessage">
    ...
   methods:{
     receiveMessage
   }
     
   </child-component>
   
 </script>

myevent는 특정 이벤트가 발생했을 때 동작하는 메서드 의미, parameter는 전달할 데이터

 

5) 이벤트 버스를 이용한 데이터 전달

이벤트 버스는 발행자와 구독자 패턴으로 이루어져있다.

컴포넌트가 A이벤트 발행하면 B이벤트가 A이벤트를 구독하는 구조

<script>
const EventBus = new Vue(); 

//이벤트 발행 emit()메서드 사용
EventBus.$emit('event_name',['payload']);

event_name : 발행할 이벤트 이름
payload: 전달할 데이터

//이벤트 구독
Eventbus.$on('event_name',(payload)=>{
//code
})

 on() : 이벤트 구독한다. 
  </script>

 

6) 컴포넌트 재사용 : 슬롯

부모 컴포넌트 => 자녀 컴포넌트에 나타나야할 콘텐츠 제공 가능

부모 컴포넌트 => 자녀 컴포넌트로부터 데이터 전달 받기 가능

1) Unnamed slot(default slot)

부모 컴포넌트의 일부를 자녀 컴포넌트에 주입할 수 있다.

<script>
//parent component
<child-comp>
  <p>SLOT</p>
</child-comp>

//child component
<div>
  <slot></slot>
  //parent component에서 정의한 <p></p> 가 표시된다.
  </div>
</script>

 

2) Named slot

slot에 속성이 포함된 형태로 **원하는 위치**에 **다양한 유형**의 콘텐츠를 삽입해야할 경우 사용한다.

//ChildComponent
<script>
<slot name="slot_name"></slot>
</script>

//ParentComponent
<script>
<div slot="slot_name"></slot>
</script>

3) Scoped slot

<templte>
<child-component>
  <template slot-scope="childData">
  //code
  </template>
  </child-component>
</templte>

//자녀 컴포넌트 
<slot :childData ="willSendData"></slot>

scoped slot을 사용하면 $emit() 메서드를 이용안해도 자녀=>부모로 데이터 전달 가능하다.

4) v-slot

<componentA>
<template v-slot:header="{message}">
  <div>
    header slot {{message}}
  </div>
  </template>
</componentA>

//축약형태
<template #header="{message}"> </template>

//컴포넌트 직접 적용
<ComponentA v=slot ="{message}">
  {{message}}
</ComponentA>

unnamed, named, scoped 과 같이 div,p 태그에서 직접 이용이 불가능 하고 **template**태그에서만 사용하고 있다.