vue 자식에서 부모 데이터 전달

$emit

부모

<template>
  // @send-message는 emit의 이름, sendMessage는 부모 컴포넌트의 메서드 이름.
  <child-component @send-message="sendMessage" />
</template>
<script>
import ChildComponent from "./ChildComponent";
export default {
  components: { ChildComponent },
  methods: {
    // data 안에 자식 컴포넌트의 this.msg가 담김.
    sendMessage(data) {
      console.log(data);
    },
  },
};
</script>

자식(ChildComponent)

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      msg: "자식 컴포넌트로부터 보내는 메시지",
    };
  },
  mounted() {
    // 자식 컴포넌트에서 emit을 보내는데, 첫 파라미터엔 emit의 이름, 두번째부터는 파라미터로 사용될 값이다.
    this.$emit("send-message", this.msg);
  },
};
</script>