vue / composition api를 사용하여 parent에서 하위 구성 요소 메서드를 호출합니다.

vue / composition api를 사용하여 parent에서 하위 구성 요소 메서드를 호출합니다.

이 컴포지션 API를 사용하여 Vue에서 재사용 가능한 모달 컴포넌트를 구축하려고 합니다.계획은 다음과 같은 몇 가지 방법을 폭로하는 것이다.toggleModal()부모 컴포넌트의 이벤트를 호출합니다.나는 내 방법을 둘 다로 썼다.setup()그리고.methods.

export default {
  setup() {
      const isModalOpen = ref(false);

      const toggleModal = () => {};

      return {
          toggleModal,
      };
  },
  methods: {
      toggleModalMethod() {},
  },
};

만약 내가console.log()내 모달 컴포넌트만 볼 수 있어toggleModalMethod()부터methods노출되어 있습니다.

자녀 메서드를 공개하여 부모 컴포넌트에서 호출하는 방법이 있습니까?

자산이 다음에서 반환되어야 합니다.setup는 하위 항목이 마운트되면 구성 요소 인스턴스에서 사용할 수 있습니다.

다음은 데모입니다.

<template>
  <div>
    <Modal ref="modal"/>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
...
export default {
  ...
  methods: {
    toggle() {
      this.$refs.modal.toggleModal();
    }
  }
};
</script>

모달 전환 기능을 공개 방법으로 노출하는 것은 널리 받아들여지는 시나리오이지만, 참조를 통해 부모로부터 자녀의 멤버에 액세스하는 것은 엣지 케이스로 간주된다.

언급URL : https://stackoverflow.com/questions/59819967/call-a-child-component-method-from-parrent-using-vue-composition-api