[Vue.js] Component

1) 컴포넌트 기본 구성

<template>
  
</template>

<script>
export default {
  // 데이터 모델, 동적 처리
  data() {
    return { /* ... */ }
  }
}
</script>

<style>
/* CSS 적용 */
</style>

---

2) 컴포넌트 사용하기

<template>
  <Header />
</template>

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

export default {
  components: {
    Header
  }
}
</script>

---

3) 부모 → 자식 : props로 데이터 전달

자식 컴포넌트에서 받을 props를 선언하고, 부모 컴포넌트에서 데이터를 바인딩한다.

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

// 부모 컴포넌트
<child-component :message="부모가전달할데이터"></child-component>

---

4) 자식 → 부모 : $emit() 으로 이벤트 전달

<!-- 자식 컴포넌트 -->
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('myevent', '보낼 데이터');
    }
  }
}
</script>

<!-- 부모 컴포넌트 -->
<child-component @myevent="receiveMessage"></child-component>

<script>
export default {
  methods: {
    receiveMessage(data) {
      console.log('자식으로부터 받은 데이터:', data);
    }
  }
}
</script>

---

5) 이벤트 버스(Event Bus) 사용하기

전역 Vue 인스턴스를 이벤트 버스로 활용하여 컴포넌트 간 데이터 전달 가능

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 이벤트 발행
EventBus.$emit('my-event', payload);

// 이벤트 구독
EventBus.$on('my-event', (payload) => {
  console.log('이벤트 받음:', payload);
});

---

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

6-1) 기본 슬롯 (Unnamed slot)

<!-- 부모 컴포넌트 -->
<child-comp>
  <p>이 내용이 자식 컴포넌트에 들어갑니다.</p>
</child-comp>

<!-- 자식 컴포넌트 -->
<div>
  <slot></slot>
</div>

6-2) 이름 있는 슬롯 (Named slot)

<!-- 자식 컴포넌트 -->
<div>
  <slot name="header"></slot>
  <slot name="footer"></slot>
</div>

<!-- 부모 컴포넌트 -->
<child-comp>
  <template v-slot:header>
    <h1>헤더 내용</h1>
  </template>
  <template v-slot:footer>
    <p>푸터 내용</p>
  </template>
</child-comp>

6-3) 스코프 슬롯 (Scoped slot)

<!-- 자식 컴포넌트 -->
<slot :user="userData"></slot>

<!-- 부모 컴포넌트 -->
<child-comp>
  <template v-slot:default="slotProps">
    <p>안녕하세요, {{ slotProps.user.name }}님!</p>
  </template>
</child-comp>

6-4) v-slot 축약형

<!-- 완전한 문법 -->
<template v-slot:header="{ message }">
  <h1>{{ message }}</h1>
</template>

<!-- 축약형 -->
<template #header="{ message }">
  <h1>{{ message }}</h1>
</template>

v-slot은 <template> 태그에서만 사용 가능하며, <div>, <p> 등 일반 태그에서는 사용할 수 없다.