[Vue .js] Composition API : props, emits 사용법

composition API porps, emits 사용법

 

Vue에 추가된 composition API는 Vue2에서의 option API보다 컴포넌트를 조금 더 독립적으로 만들기 유리하다.

관심사의 분리(상위 컴포넌트는 데이터 컨테이너 역할로 데이터를 직접 조작, 하위 컴포넌트는 데이터를 조작하지 않고 표현만을 담당)를 통해 컴포넌트의 재사용률을 높일 수 있다.

props와 emits 사용법 예시

아래예시는 App.vue 안에서 TodoList.vue 컴포넌트를 사용하는 것이다.

 

App.vue

<template>
  <div id="app">
    <TodoList :todoItemProps="todoItems" @emitClickList="alertList"></TodoList>    
  </div>
</template>

<script setup>
import TodoList from './components/TodoList.vue'
import { ref } from 'vue';

const todoItems = ref(['itemOne', 'itemTwo', 'itemThree']);

const alertList = (idx) => {
  alert(todoItems.value[idx]);
}
</script>

상위 컴포넌트인 App.vue에서 하위 컴포넌트에게 datadls props를 내려주고 하위 컴포넌트에게 이벤트인 emits을 받는다.

 

하위컴포넌트(TodoList.vue)의 todoItemsProps란 이름의 props에 상위컴포넌트(App.vue)의 todoItems라는 배열을 내린다.

 

하위컴포넌트(TodoList.vue)의 emitClickList란 이름의 이벤트에 상위컴포넌트(App.vue)의 alertList 라는 함수를 실행한다.

 

TodoList.vue

<template>
    <div>
        <ul>
            <li v-for="(todoItem, idx) in props.todoItemProps" v-bind:key="todoItem">
                <span>{{ todoItem.item }}</span>
                <span @click="clickList(idx)">Alert</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
	//상위 컴포넌트에서 todoItemsProps라는 이름의 props를 선언(type은 배열)
	//type => 문자열: String, 숫자형: Number, 배열: Array, 논리형: Boolean
	todoItemProps: Array
})

const emit = defineEmits(['emitClickList'])

const clickList = (idx) => {
    //idx 인자를 emitClickList 라는 이름으로 상위 컴포넌트에 전달
    emit('emitClickList', idx); 
}

</script>

1. props, emit은 모두 객체로 defineProps, defineEmits 함수를 이용하여 선언 및 정의한다.

2. props에는 상위 컴포넌트에서 받은 데이터 타입을 정의한다.

3. emit에는 상위 컴포넌트에 넘겨줄 emit들을 배열로 선언한다.

 

todoItemProps 안에는 상위 컴포넌트에서 넘겨준 todoItems 라는 배열이 들어있다.

배열을 꺼내쓸 때는 in 표현식을 이용해서 배열 안의 데이터에 접근할 수 있다. (아이템, 인덱스) in 배열값

아이템, 인덱스 순서로 제공되고 이름은 임의로 정할 수 있다.

 

@click을 통해서 클릭 이벤트가 일어났을때 clickList 함수가 실행되고 해당 함수는 emitClickList라는 이름으로 인자인 idx를 상위 컴포넌트에 올려준다.

상위 컴포넌트에서 해당 emit이 일어났을 때, 수행될 함수를 정의한다.