親構成部品で子構成部品を実行する方法

// 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();
    },
  },
};
</script>

<style scoped></style>

// ChildComponent.vue
<template>
  <div>
    <button type="button" @click="childFunc" ref="child_btn">
      자식에 있는 클릭
    </button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    childFunc() {
      alert("부모 컴포넌트에서 직접 발생시킨 이벤트");
    },
  },
};
</script>

<style scoped></style>