[카테고리:] 프로그래밍

Props

자식 컴포넌트에서 부모로부터 데이터를 받는 것이다.

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

자식 컴포넌트에 props 를 선언하고

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('부모 컴포넌트로부터 💌을 전달받았어요!')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

이렇게 부모 컴포넌트에서 자식 컴포넌트로 greeting 을 msg로 전달한다.

Emits

자식 컴포넌트는 부모로부터 props를 받는 것 뿐만 아니라 이벤트를 발송 할 수 있다.

<script setup>
// emit할 이벤트 선언
const emit = defineEmits(['response'])

// 인자와 함께 emit
emit('response', '자식 컴포넌트로부터 🌷를 받았어요!')
</script>

이렇게 자식이 발송한 response 라는 이름의 이벤트에 메시지를 실어서 보내면

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('자식 컴포넌트로부터 아직 메시지를 받지 못했어요!')
</script>

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

부모에서는 이렇게 수신할 수 있다.

Slots

props 로 데이터를 전달하는 것 외에도 구성 요소는 slots 를 통해 템플릿 조각을 자식 구성 요소에 전달할 수도 있다.

Options API 는 기존 Vue.js의 전통적인 방식으로

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

이런 식으로 data, methods, computed, watch 등의 정해진 구조 안에 작성하는 방식이다.

하지만 Vue 3 부터는 Composition API 라고 해서

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <!-- 이 버튼이 작동하도록 만들어 봅시다 -->
  <button>숫자 세기: {{ count }}</button>
</template>

이런 식으로 함수를 import 하고 JavaScript 와 비슷하게 작성된다.

Composition API 의 장점은 정해진 틀 안에 작성하는게 아니라 유연하고 상태와 로직이 분리되지 않고 한 덩어리로 있어서 보기 편하다.

Vue 3 에서도 Options API 를 계속해서 지원하지만 본인은 Composition API 를 주로 사용 할 예정이다.