[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.myHeight}`);
  },
  methods: {
    gettingOld() {
      this.myAge = 80;
    },
  // 손자의 요청을 통해 데이터 변경
    moveSchool(schoolName) {
      this.myage = schoolName;
    },
  },
};
</script>

<style scoped></style>

孫がデータを変更したい場合は、要求を両親に送った後、両親が変更しなければならない.손자 -> 최상단 으로 요청을 올려보냄 -> Emit整理する
孫:ステータス変更のリクエスト->親:ロールの中継、最上位へのリクエスト->最上位:実際のステータスの変更