자식 컴포넌트에서 부모 컴포넌트로 이벤트/데이터 전달하기

이번엔 자식 컴포넌트에서 부모 컴포넌트로 이벤트와 데이터를 전달하는 방법을 알아보자.

this.$emit은자식 컴포넌트에서 부모 컴포넌트의 이벤트를 발생시키는 기능을 해주는 함수이다.
첫번째 파라미터는 부모 컴포넌트에 정의된 커스텀 이벤트 이름이고
두번째 파라미터는 전달하고 싶은 데이터이다.

this.$emit("send-message", this.msg);

부모 컴포넌트에서 그 이벤트를 받아올 때는 @이벤트 이름이라고 적고 그 이벤트가 발생했을 때 호출할 함수를 써주면 된다. 그 함수의 파라미터로는 자식 컴포넌트에서 넘겨준 데이터를 받아올 수 있다.

<ChildComponent @send-message="sendMessage" />

sendMessage(data) {
      // alert(data);
      this.parentMsg = data;
    },

// ChildComponent.vue
<template>
  <div>
    <button type="button" @click="sendFromChild">자식 컴포넌트 버튼</button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      msg: "자식 컴포넌트로부터 보내는 메시지",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    sendFromChild() {
      this.$emit("send-message", this.msg);
    },
  },
};
</script>

<style scoped></style>

// DataBindingExample.vue
<template>
  <div>
    <ChildComponent @send-message="sendMessage" />
    <h1>{{ parentMsg }}</h1>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMsg: "",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    sendMessage(data) {
      // alert(data);
      this.parentMsg = data;
    },
  },
};
</script>

<style scoped></style>