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

박경준·2021년 11월 4일
0

vue beginner

목록 보기
14/18

$emit 사용하기

// /views/ChildComponent4
<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      msg: "자식 컴포넌트로부터 보내는 메시지",
    };
  },
  mounted() {
    // 자식 컴포넌트에서 emit을 보내는데, 첫 파라미터엔 emit의 이름, 두번째부터는 파라미터로 사용될 값이다.
    this.$emit("send-message", this.msg);
  },
};
</script>
// /views/ParentComponent4
<template>
  // @send-message는 emit의 이름, sendMessage는 부모 컴포넌트의 메서드 이름.
  <child-component @send-message="sendMessage" />
</template>
<script>
import ChildComponent from "./ChildComponent4";
export default {
  components: { ChildComponent },
  methods: {
    // data 안에 자식 컴포넌트의 this.msg가 담김.
    sendMessage(data) {
      console.log(data);
    },
  },
};
</script>
profile
빠굥

0개의 댓글