TIL 230727 [Vue] 자식 컴포넌트에게 props 전달하기

컴포넌트를 재사용하는게 좋을 것 같아 props가 필요해졌다. vue에서는 props를 어떻게 넘기는지 알아봤다.

 

먼저 부모 컴포넌트에서 데이터를 넘겨준다. 넘겨주는 값의 이름을 정하고 :를 붙이면 된다. 나는 lanType과 select라는 props를 넘겨줬다.

그리고 신기하게 vue에서는 넘기는 값의 ""의 내부가 자바스크립트 코드를 쓸 수 있는 범위인 것 같다. "" 안에 그냥 쓰면 변수이고, 문자열을 넣고 싶으면 따옴표로 감싸줘야 한다. 그래서 '한국어'와 'English'라는 문자열을 넘길 때 안에서 작은따옴표로 감싸서 문자열을 넘겨줬다.

// 부모 컴포넌트의 <template /> 태그 내부
<LanBtn
  id="kr"
  :lanType="'한국어'"
  :select="data.activeKr"
  @click="changeButtonState"
/>
<LanBtn
  id="en"
  :lanType="'English'"
  :select="!data.activeKr"
  @click="changeButtonState"
/>

 

부모 컴포넌트에서 값을 넘겨줬으면 이제 자식 컴포넌트에서 값을 받아야한다. props 객체 안에 넘겨준 값의 이름을 키, 대문자로 시작하게  타입을 값으로 적는다. 정확하지는 않지만 값으로 넣는 타입은 정해져 있는 것 같아 원하는 타입은 넣을 수는 없는 것 같다...🤔

// 자식 컴포넌트
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    lanType: String,
    select: Boolean,
  },
});
</script>

 

그리고 props를 변수 사용하듯 똑같이 사용하면 된다.

// 자식 컴포넌트
<template>
  <button class="lan-btn" :class="select ? 'select' : null">
    {{ lanType }}
  </button>
</template>

 

함수를 props로 넘기는 방법도 찾아봤는데 vue에서는 부모 컴포넌트의 state를 변경하려면 해당 state를 변경하는 setState 함수를 전달받는 게 아니라 emit이라는 약속된 함수를 사용해서 state를 변경하는 것 같다. 아직은 필요하지 않으니 다음에 필요할 때 찾아보는 것으로..!

 

+

props 넘기는 방법을 알아냈으나 굳이 분리할 필요가 없다고 생각돼서 다시 원상복구했다...ㅎ...😂