부모 컴포넌트에서 자식 컴포넌트의 데이터 값 동기화하기

앞에서는 자식 컴포넌트에서 부모 컴포넌트로 커스텀 이벤트를 발생시키면서 데이터를 전달했다. 그런데 실무에서는 이것이 굉장히 불편한 작업이다. 그래서 이번에는 자식 컴포넌트에 정의된 데이터가 어떤 값으로 변경이 되든 항상 그것을 부모 컴포넌트에서 감시하려고 한다. 그러면 굳이 자식 컴포넌트에서 부모 컴포넌트로 커스텀 이벤트를 발생시키면서 데이터를 전달할 필요가 없게 된다.

// DataBindingExample.vue
<template>
  <div>
    <button type="button" @click="showData">부모 버튼</button>
    <ChildComponent ref="child_component" />
    <h1>{{ parentMsg }}</h1>
  </div>
</template>

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

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

<style scoped></style>

// ChildComponent.vue
<template>
  <div>
    <button type="button" @click="changeData">자식 컴포넌트 데이터 변경</button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      msg: "자식 컴포넌트로부터 보내는 메시지",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    changeData() {
      this.msg = "자식 컴포넌트에서 데이터 변경이 일어났습니다.";
    },
  },
};
</script>

<style scoped></style>