[Vue.js] Emit

Emit 사용 코드

Emit 특징

$emit – 자식이 부모 컴퍼넌트로 이벤트를 전달 메서드
부모 자식 관계여야만 하고, 데이터를 전달하긴 하는데, 이벤트 함수에 바꿔줘야 할 데이터를 딸려보내서 부모에서 바꾸게 한다. 즉, 데이터 바인딩이 아니라 요청이다.

사용 이유

자식이 부모 데이터를 직접 바꾸게 되면 데이터 구조가 엉망이 되어 데이터의 일관성이 무너지기 때문이다.

자손.vue

<template>
  <div class="home">
    <h1>손자</h1>
    {{ mySchoolProp }}
    {{ myAgeProp }}
    <button v-on:click = "moveSchool">나 전학갈래!</button>
  </div>
</template>

<script>
export default {
  name: "HomeGrandChild",
  props: ["mySchoolProp","myAgeProp"],
  methods: {
      moveSchool(){
        // emit("부모가 받을 요청명", "요청 1" , "요청 2" ...)
          this.$emit("moveSchool", "명문초등학교");
      }
  }
}
</script>

<style scoped>

</style>

emit("부모가 받을 요청명", "요청 1" , "요청 2" ...)

부모.vue

<template>
  <div class="home">
    <h1>자식</h1>
    {{ mySchoolProp }}
    {{ myAgeProp }}
    <HomeGrandChild
      v-bind:mySchoolProp="mySchoolProp"
      v-bind:myAgeProp="myAgeProp"
      v-on:moveSchool="moveSchool"
    />
    <!-- 자식의 $emit메서드는 v-on으로 받는다, 
        v-on : 자식 메서드 명 = "부모메서드" -->
  </div>
</template>

<script>
import HomeGrandChild from "../components/HomeGrandChild.vue";
export default {
  name: "HomeChild",
  components: {
    HomeGrandChild,
  },
  // 부모에서 보내오는 상태 받기!
  // 여러 상태를 받아올 수 있기에 배열형태
  props: ["mySchoolProp","myAgeProp"],
  created() {
    // props로 받아오지 않았다면 undefined
    console.log(this.mySchool);
  },
  methods: {
    //   해당 함수의 파라미터를 가져오는것이기 때문에 this를 따로 작성해주면 안된다.
    moveSchool(schoolName) {
  // 최상단으로 올려보내기 위해 다시 emit 사용, 중계역할
      this.$emit("moveSchool",schoolName)
    },
  },
};
</script>

<style scoped></style>

V-on: 자식 이벤트 = “부모메서드“

최상단.vue

<template>
  <div class="home">
    <h1>할아버지</h1>
    <!-- 자식에 상태(State)를 '단방향'으로 전송 -->
    <!-- v-bind: 보낼 상태명 = "상태" -->
    <HomeChild
      v-bind:mySchoolProp="mySchool"
      v-bind:myHeightProp="myAge"
      v-on:moveSchool="moveSchool"
    />
  </div>
</template>

<script>
import HomeChild from "../components/HomeChild.vue";
export default {
  name: "Home",
  components: {
    HomeChild,
  },
  data() {
    return {
      myAge: "12",
      mySchool: "현재초등학교",
      myInfo: {},
    };
  },
  created() {
    console.log(`내 나이: ${this.myAge}`);
    console.log(`내 학교: ${this.mySchool}`);
  },
  methods: {
    gettingOld() {
      this.myAge = 80;
    },
  // 손자의 요청을 통해 데이터 변경
    moveSchool(schoolName) {
      this.myage = schoolName;
    },
  },
};
</script>

<style scoped></style>

손자가 데이터를 바꾸고 싶다면, 요청을 부모한테 보낸 후 부모가 바꿔줘야함
손자 -> 최상단 으로 요청을 올려보냄 -> Emit

정리
손자 : state 변경 요청 -> 부모 : 중계 역할, 최상단으로 요청 -> 최상단 : 실제 State 변경