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

부모 컴포넌트에서 자식 컴포넌트의 데이터를 직접 변경할 수 있다.

// DataBindingExample.vue
<template>
  <div>
    <button type="button" @click="callChildFunc">부모에 있는 클릭</button>
    <ChildComponent ref="child_component" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {};
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    callChildFunc() {
      // this.$refs.child_component.$refs.child_btn.click();
      // this.$refs.child_component.childFunc();
      this.$refs.child_component.msg = "부모 컴포넌트에서 변경한 메시지";
    },
  },
};
</script>

<style scoped></style>

// ChildComponent.vue
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      msg: "자식에 있던 메시지",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};
</script>

<style scoped></style>