vue.js - 부모 자식 component 간 데이터 전달 (props & emit )

Props & Emit 사용법

- Props : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용

- Emit : 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용

 

☆ 중요

1. 전달 키와 받는 키가 동일해야 한다.

2. 받는 키를 등록해줘야 합니다.

 

Parent.vue ( 부모 컴포넌트 )

<template>
  <v-app>
    <Child
      name="ccc"
      @setInput="setInput"
    />
    child 컴포넌트에서 받은 데이터: {{ value }}
  </v-app>
</template>
<script>
import Child from '../views/Child.vue';

export default {
  name: 'Parent',
  components:{
    Child
  },
  data: () => ({
    value: "",
  }),
  methods: {
    setInput(value) {
      this.value = value;
      console.log("child 컴포넌트에서 받은 값 : " + value)
    }
  }
}
</script>

Parent2.vue ( 부모 컴포넌트 )

<template>
  <v-app>
    <Child
      name="Parent2"
      @setInput="setInput"
    />
    child 컴포넌트에서 받은 데이터: {{ value }}
  </v-app>
</template>
<script>
import Child from '../views/Child.vue';

export default {
  name: 'Parent2',
  components:{
    Child
  },
  data: () => ({
    value: "",
  }),
  methods: {
    setInput(value) {
      this.value = value;
      console.log("child 컴포넌트에서 받은 값 : " + value)
    }
  }
}
</script>

- Props

   -> 부모 컴포넌트에서 자식 컴포넌트에게 name이라는 키 값을 통해 값을 보냄

   ->  name은 키가 되고 "Parent", "Parent2"가 값이된다

   -> 선택한 키를 자식 컴포넌트에 등록을 해야한다

 

- Emit

  -> Emit는 @setInput이라는 키를 등록하고  child 컴포넌트에서 받을 값을 콘솔에 띄워준다

 

Child.vue ( 자식 컴포넌트 )

<template>
  <div>
    버튼 이름 :
    <button
      class="primary"
      @click="onClick()"
    >
      {{ name }}
    </button>

    <div>
      Emit 입력 :
      <input
        v-model="value"
        type="text"
      >
      <button
        class="error"
        @click="onEmit"
      >
        {{ name }} Emit
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Child",
  props:{
    name: String,
  },
  data: () => ({
    value: "",
  }),
  methods: {
    onClick() {
      console.log(this.name, "버튼 클릭");
    },
    onEmit(){
      this.$emit("setInput", this.value);
    }
  }
}
</script>

- Props

   -> props:{}에 해당 키를 등록하고 사용

   -> Json형태, Array 형태로 등록가능

// Json
props: {
	name : String,
    },
    
// Array
props : ["name"]

 

- Emit

  -> this.$emit("키", 값) 형태로 데이터를 지정

 

참고

https://any-ting.tistory.com/41