[ Vue ] Vue에서 컴포넌트간 데이터를 주고 받는 방법 | Props & Emit

2024. 3. 27. 22:57· Vue
목차
  1. Props
  2. Emit
728x90

Props

 

단방향 데이터 흐름

부모 → 자식 방향으로 데이터 전달

부모 컴포넌트가 업데이트될 때마다 자식 컴포넌트의 모든 props가 최신 값으로 업데이트된다.

따라서 자식 컴포넌트 내부에서 props를 변경하려 하면 안된다.

 

 

defineProps

<script setup> 스타일의 SFC에서는 defineProps() 매크로를 사용하여 props 선언 가능

 

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

const greeting = ref('Hello from parent')
const props = defineProps({
  msg: String
})
</script>

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

 

 

자식 컴포넌트에서 props를 변경해야 하는 경우

 

1. props는 초기 값을 전달하는 데만 사용하고, 이를 자식 컴포넌트에서 로컬 데이터 속성으로 할당하여 사용

const props = defineProps(['initialCounter'])

// props.initialCounter는 counter의 초기 값으로 사용됩니다.
// 추후 props가 갱신되어도 counter 값이 업데이트 되지 않습니다.
const counter = ref(props.initialCounter)

 

 

2. prop 값을 사용하여 계산된 속성 정의

const props = defineProps(['size'])

// prop이 변경될 때, 계산된 속성은 자동으로 업데이트 됩니다.
const normalizedSize = computed(() => props.size.trim().toLowerCase())

 

더보기

😑 computed의 get, set과 props, emit을 사용할 경우 하위 컴포넌트 요소의 v-model에 props로 받은 데이터를 바인딩해야 하면서도 상위 컴포넌트에 선언된 원 데이터를 바꿔주는 것이 가능하다.

그냥 v-model 쓰면 되지, 누가 이런 바보같은 방식을 써? 라고 생각했지만... 써야만 하는 상황이 있었다.

 


 

Emit

자식 → 부모로 특정한 이벤트 전달

 

 

defineEmits

emit 옵션을 사용하기 위해 선언하는 Vue 내장 APIs로, 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달할 때 명시하고 사용한다.

첫 번째 인자 : 이벤트 이름

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

const childMsg = ref('No child msg yet')
const emit = defineEmits(['response'])

emit('response', 'hello from child')
</script>

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

 

 

 


 

example 1

// 자식컴포넌트

const emit = defineEmits = ['toggle-todo'];

const toggleTodo = (index) => {
  emit('toggle-todo', index);
}
// index라는 값을 toggle-todo 라는 이름으로 보냄( 자식 -> 부모 )
// 부모컴포넌트
<todoList @toggle-todo="toggleTodo"/>

const toggleTodo = (index) => {
	todos.value[index].completed = true
}
// 아까 자식컴포넌트에서 보낸 index의 값이 여기 위의 인자 index에 들어오는 것임

 

 

example 2

// button.vue 하위컴포넌트

<template>
	<button @click="$emit('test-emit')"> Emit 버튼 </button>
</template>

<script setup>
defineEmits(["test-emit"]);
</script>
// index.vue 상위컴포넌트

<template>
	<button @test-emit="checkEmit"/>
</template>

<script setup>
import button from '@/component/button.vue'

const checkEmit = () => {
	console.log('emit 발생')
}
</script>

 

 


[ 참고 자료 ] 

https://ko.vuejs.org/guide/components/props.html

https://ko.vuejs.org/guide/components/events.html

 

 

 

728x90

'Vue' 카테고리의 다른 글

[ Vue ] defineProps에 타입을 지정하는 2가지 방법  (0) 2024.03.27
[ Vue ] 의존성 주입 (Provide Injection)  (0) 2024.03.27
[ Vue ] v-slot이란? | v-slot으로 공통 컴포넌트 만들기  (0) 2024.03.27
[ Vue ] v-html 사용을 지양해야 하는 이유  (0) 2024.03.27
[ Vue ] 버전 업그레이드 (3.0 → 3.3)  (0) 2024.03.27
  1. Props
  2. Emit
'Vue' 카테고리의 다른 글
  • [ Vue ] defineProps에 타입을 지정하는 2가지 방법
  • [ Vue ] 의존성 주입 (Provide Injection)
  • [ Vue ] v-slot이란? | v-slot으로 공통 컴포넌트 만들기
  • [ Vue ] v-html 사용을 지양해야 하는 이유
ZoD
ZoD
바쁘게 굴러가는 ZoD의 하루~
ZoD
como siempre
ZoD
  • 분류 전체보기 (173)
    • Daily (0)
    • Javascript (16)
      • 모던 자바스크립트 (46)
    • Typescript (8)
    • FrontEnd (7)
    • React (21)
      • tanstack query (1)
      • 라이브러리 (3)
    • Vue (33)
      • Nuxt (11)
      • Quasar (6)
    • CSS (12)
    • Storybook (8)
    • Figma (3)
    • CS 지식 (5)
    • Network (5)
    • 알고리즘 (2)
    • 사이드 프로젝트 (4)
      • ddangkong (4)
      • boncierge (0)
    • 개발, 근데 이제 헛소리를 곁들인 (1)
    • ETC (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

최근 글

hELLO · Designed By 정상우.v4.2.2
ZoD
[ Vue ] Vue에서 컴포넌트간 데이터를 주고 받는 방법 | Props & Emit
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.