Vue는 상위 창이 닫힐 때 작업을 수행하기 위해 하위 노드를 어떻게 구현합니까?

Vue 하위 노드의 상위 창이 닫힙니다

Vue 애플리케이션에서는 상위 창이 닫힐 때 구성 요소(하위 노드)가 일부 작업을 수행해야 하는 상황에 자주 직면합니다.

예를 들어 모달 상자에서 모달 상자의 닫기 버튼을 클릭하면 양식이 제출되고 동시에 모달 상자 구성 요소가 소멸되기를 바랍니다.

Vue 애플리케이션에서 상위 창이 닫힐 때 일부 작업을 수행하기 위해 하위 노드를 어떻게 구현합니까?

방법 1: $emit 이벤트 사용

Vue 구성 요소는 사용자 정의 이벤트를 트리거하고 상위 구성 요소에 데이터를 전달하는 데 사용할 수 있는 $emit 메서드를 제공합니다.

하위 노드에서 상위 창의 닫기 이벤트를 수신한 다음 사용자 정의 이벤트를 트리거할 수 있습니다.

methods: {
  onClose() {
    this.$emit('close');
  }
}

상위 창에서 하위 노드 레이블에 수신 이벤트를 바인딩하고 이벤트가 발생할 때 제출할 수 있습니다. 닫혀 있고 모달 상자 구성 요소를 파괴합니다.

<modal-dialog @close="handleSubmit">
  <!-- 模态框内容 -->
</modal-dialog>

methods: {
  handleSubmit() {
    // 提交表单
    // ...

    // 销毁模态框组件
    this.$refs.modalDialog.$destroy();
  }
}

방법 2: $parent 속성 사용

$emit 이벤트를 사용하는 것 외에도 $parent 속성을 사용하여 상위 구성 요소 인스턴스를 가져온 다음 호출할 수도 있습니다. 상위 구성 요소의 메서드.

하위 노드에서 $parent 속성을 사용하여 상위 구성 요소 인스턴스를 가져온 다음 상위 구성 요소의 닫기 메서드를 호출할 수 있습니다.

methods: {
  onClose() {
    this.$parent.close();
  }
}

상위 창에서 모달 인스턴스에 닫기를 정의해야 합니다. box 구성 요소 메서드를 사용한 다음 하위 노드에서 메서드를 호출합니다.

<modal-dialog ref="modalDialog">
  <!-- 模态框内容 -->
</modal-dialog>

mounted() {
  this.$refs.modalDialog.close = () => {
    // 提交表单
    // ...

    // 关闭模态框
    this.$refs.modalDialog.hide();
  }
}

Summary

Vue 애플리케이션에서 상위 창이 닫힐 때 하위 노드가 일부 작업을 수행해야 하는 경우 $emit 이벤트 또는 $부모 속성.

$emit 이벤트를 사용하면 하위 노드 구성 요소가 더 유연해지고 다른 상위 구성 요소에서 재사용될 수 있지만 상위 구성 요소에서 수신 이벤트를 수동으로 작성해야 합니다.

$parent 속성을 사용하면 자식 노드 컴포넌트를 더욱 간결하게 만들 수 있습니다. 부모 컴포넌트의 메서드만 호출하면 되지만, 부모 컴포넌트에서 닫는 메서드를 수동으로 정의하고 자식 노드에 전달해야 합니다.

위 내용은 Vue는 상위 창이 닫힐 때 작업을 수행하기 위해 하위 노드를 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!