Vue 부모 컴포넌트에서 자식 컴포넌트의 데이터 변경하기

$refs를 이용해 자식 컴포넌트에 접근하여 데이터를 변경할 수 있다.

// /views/ChildComponent3
<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
};
</script>

// /views/ParentComponent3
<template>
  <child-component @send-message="sendMessage" ref="child_component" />
  <button type="button" @click="changeChildData">Change Child Data</button>
</template>
<script>
import ChildComponent from "./ChildComponent3";
export default {
  components: { ChildComponent },
  methods: {
    changeChildData() {
      this.$refs.child_component.msg = "부모 컴포넌트가 변경한 데이터";
    },
  },
};
</script>