emit

부모 컴포넌트에서 data에 대해서 어떠한 event를 행하여 data에 변화를 주면 자식 컴포넌트의 data도 바뀔 수 있다. 하지만, 역으로 하는것은 쉽지 않다.

 

이를 해결하기 위해서 vue에서는 emit을 제공해준다.

 

<template>
  <div>
    <h3>Hey!</h3>
    <greeting :age="age"/>
    <user :age="age" @age-change="age++"/>
  </div>
</template>

<script>
import Greeting from "@/components/Greeting";
import User from "@/components/User";

export default {
  name: "App",
  components: {
    Greeting,
    User,
  },
  data() {
    return {
      age: 20
    }
  }
}
</script>

<template>
  <button type="button" @click="onClickAge">Update Age</button>
  <p>The user is {{ age }} years old</p>
</template>

<script>
export default {
  name: "User",
  props: ["age"],
  methods: {
    onClickAge() {
      this.$emit("age-change")
    }
  }
}
</script>

</user :age="age" @age-change="age++">

부모에서 v-on을 사용하여 @age-change라는 event를 선언하고, 자식에서 이를 사용하고 싶다면 this.$emit(event 이름)을 하여, 호출하면 된다.

 

 

emit과 함께 어떤한 값을 전달하고 싶다면....

<template>
  <div>
    <h3>Hey!</h3>
    <greeting :age="age"/>
    <user :age="age" @age-change="updateAge"/>
  </div>
</template>

<script>
import Greeting from "@/components/Greeting";
import User from "@/components/User";

export default {
  name: "App",
  components: {
    Greeting,
    User,
  },
  data() {
    return {
      age: 20
    }
  },
  methods: {
    updateAge(num) {
      this.age += num;
    }
  }
}
</script>

<template>
  <button type="button" @click="onClickAge">Update Age</button>
  <p>The user is {{ age }} years old</p>
</template>

<script>
export default {
  name: "User",
  props: ["age"],
  emits: ["age-change"],
  methods: {
    onClickAge() {
      this.$emit("age-change", 3)
    }
  }
}
</script>

이런 식으로, this.$emit에 event 이름과 값을 전달해주면 된다. 

emits라는 배열의 경우, 이러한 event를 emit할 것이라는 것을 알리기 위해서이다.