[Vue.js] props와 emit를 이용해 부모 컴포넌트와 자식 컴포넌트 사이에 데이터 전달하기.

 

 

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

 

props와 emit를 사용하여
부모 컴포넌트와 자식 컴포넌트 사이에
데이터를 전달해보자.

 

 

 

 

 

 

props

• 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달한다.
• 명시적인 props 선언이 필요하다.
• <script setup>을 사용할 때는 defineProps() 매크로를 사용하여 props를 선언한다.
• <script setup>이 아닌 컴포넌트의 경우 props 옵션을 사용하여 선언한다.
• 선언 및 템플릿 참조 시 camelCase로 사용한다.
• 자식 컴포넌트 전달 시 kebab-case를 사용한다. (HTML 속성 표기법)

 

 

defineProps의 코드 예시 _ 객체를 사용한 선언(권장)

<script setup>

const { msg, count } = defineProps({
  msg:   { type: String, required: true },
  count: { type: Number, default: 0 },
})

</script>

 

 

 

defineProps의 코드 예시 _ 문자열 배열을 사용한 선언

<script setup>
defineProps(['myMsg'])
</script>

 

 

 

props의 코드 예시 _ 객체를 사용한 선언(권장)

<script>

  props: {
    msg:   { type: String, required: true },
    count: { type: Number, default: 0 },
  }
  
</script>

 

 

 

 

 

---

 

 

 

 

 

emit

• $emit()는 자식 컴포넌트가 이벤트를 발생키셔 부모 컴포넌트로 데이터를 전달하는 역할 메서드이다.
• 컴포넌트에서 발생시키는 커스텀 이벤트를 선언한다.
• 발생시키는 이벤트는 두 가지 형태로 선언 가능하다.
• 문자열 배열을 사용하는 간단한 형태
• 각 속성 키가 이벤트 이름이고 값이 null 또는 유효성 검사 함수인 객체 형태

 

 

emit 코드 예시

자식 컴포넌트

<script>
  methods: {
    showText() {
      this.$emit('show', 'lightpink')
    }
</script>

<template>
    <button @click="showText()" class="c-btn"> 부모 컴포넌트 색상 바꾸기 </button>
</template>

  부모 컴포넌트
  
  methods: {
    show(color) {
      this.backColor = color;
    },

 

 

 

 

---

 

 

 

 

간단하게 프로젝트 만들기

• 부모 컴포넌트에서 버튼을 누르면 자식 컴포넌트가 등장한다. (props 사용)
• 자식 컴포넌트에서 버튼을 누르면 부모 컴포넌트의 배경색이 핑크색으로 바뀐다. (emit 사용)

 

 

화면

 

 

 

 

---

 

 

 

 

App.vue 코드

• template 코드

<template>
<div class="app" :style="{backgroundColor: backColor}">
  <button class="p-btn" @click="child"> 자식 컴포넌트 나타나기 </button>
  <ChildComponent :open="open" @show="show"/>
</div>
</template>

:style은 v-bind:의 축약형으로 v-bind:style이 아닌, :style로 바로 사용할 수 있다. v-bind는 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩할 때 사용한다. 여기서 :style은 속성을 바인딩할 때인, 속성을 내려보낼때 사용한다.(DOM으로 내려보냄)

자식 컴포넌트는 emit으로 어떤 메서드를 실행시킬지와 컬러명을 전달할 것이다. 그러면 부모 컴포넌트에서 show라는 메서드가 실행된다. show라는 메서드는 컬러를 받아 backColor를 바꾼다.  그러면 :style은 반응형이기 때문에  backColor를 backgroundColor에 넣어 우리가 다음에 작성할 style보다 더 먼저 DOM에 올라간다.

부모 컴포넌트에 버튼을 만들고 그 버튼을 누르면 자식 컴포넌트가 나타나도록 할 것이다. p-btn 버튼을 만들고 그 버튼을 클릭하면 child라는 메서드가 실행되도록 했다. 

자식 컴포넌트 이름은 ChildComponent이다. open이란 데이터는 script에서 false로 기본값을 설정할 것이다. 그래서 처음 화면에 들어가면 자식 컴포넌트는 보이지 않을 것이다. p-btn을 누르면 child 메서드가 실행되도록 만들었는데, 이 child 메서드는 open값을 반대로 바꿔주도록 만들 것이다. 그래서 p-btn을 누르면 false 값이던 open이 true로 바뀐다.

그러면 이런 open 값을 ChildComponent에 보내야한다. 그래서 이번엔 :open을 사용했다. 아까 처음 설명했을 때, v-bind는 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩할 때 사용한다고 했다. :open은 자식 컴포넌트로 내려보내서 props를 통해 해당 값을 받게 할거니까, 이번엔 prop을 표현식에 동적으로 바인딩하기 위해 사용했다.

@show는 v-on을 사용한 것으로, 값을 올려보내는 역할을 한다. @v-on:eventName="핸들러"로 표기하며, 축약형은 @eventName="핸들러"가 된다. 자식 컴포넌트에서 emit으로 부모 컴포넌트에 데이터를 전달하기에 v-on을 쓴다.

 

 

• script 코드

<script>
import ChildComponent from "@/components/ChildComponent.vue";

export default {
  name: "App",
  components: {ChildComponent},
  data() {
    return {open:false, backColor:'lemonchiffon'}
  },
  methods: {
    show(color) {
      this.backColor = color;
    },
    child() {
      this.open = !this.open;
    }
  }
}
</script>

App.vue에 ChildComponent가 보여야하니까, import 해준다.

data에 open 값을 false로 설정해주고, backColor에 원하는 컬러를 입력한다.

이제 메서드를 설정할 것이다. 메서드 show( )는 color를 받아와 backColor를 변경한다. 그러면 lemonchiffon이던 컬러가 바뀔 것이다. 그리고 :style을 통해 배경컬러가 변경된다. 

메서드 child( )는 p-btn 버튼이 클릭될 때 마다 값이 반전된다. false -> true로 true -> false로 변경된다. 이 바뀐 값은 ChildComponent로 넘어간다.

 

 

• sytle 코드

<style>
.app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.p-btn {
  position: absolute;
  width: 30%;
  height: 10%;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.1rem;
  z-index: 2;
  cursor: pointer;
}
</style>

 

 

 

---

 

 

 

ChildComponent.vue 코드

• template 코드

<template>
  <div class="child" :class="{open:open}">
    <button @click="changeColor()" class="c-btn"> 부모 컴포넌트 색상 바꾸기 </button>
  </div>
</template>

child 클래스가 가장 상위에 있는 클래스로 ChildComponent의 전체 화면을 이야기한다. 이 전체 화면은 open의 값이 true가 되면 보이도록 하고, false면 보이지 않도록한다. script에서 .open을 통해 화면의 위치를 조정했다. false이면 화면 바깥에 위치하고 true면 .child.open에 설정한 값으로 인해 화면 안쪽에 보이도록 했다.

c-btn을 만들고 이 버튼을 클릭하면 changeColor 메서드가 실행되도록 했다.

 

 

• script 코드

<script>
export default {
  name: 'ChildComponent',
  props: {
    open: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    changeColor() {
      this.$emit('show', 'lightpink')
    }
  },
}
</script>

부모 컴포넌트로 받은 open 값을 props로 받았다. open의 값은 boolean 형태여야하고, true가 되어야 open이 실행되도록 했다.

메서드 changeColor는 $emit으로 부모 컴포넌트에게 show라는 커스텀 이벤트를 발행하고 lightpink가 첫번째 인자로 전달된다. 부모 컴포넌트에 ChildComponent @show="show"를 적었었다. 그러면 부모가 이 이벤트가 발행된 걸 알고 핸들러를 실행시킨다.

 

 

• style 코드

<style>
.child {
  position: relative;
  width: 50vw;
  height: 100vh;
  top: 0;
  right:0;
  background-color: cornflowerblue;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(.71,1.7,.58,.98);
}

// open에 true가 오면 transform 값이 바뀐다.
.child.open {
  transform: translateX(0%);
}

.c-btn {
  position: absolute;
  width: 60%;
  height: 10%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.1rem;
  cursor: pointer;
}

</style>

 

 

• 주의하기

만약에 부모 컴포넌트와 자식 컴포넌트의 버튼 이름이 같을 경우 버튼이 작동하지 않으니 꼭 버튼의 이름을 다르게 설정해주자!