How does Vue implement child nodes to perform operations when the parent window is closed?

Vue child node’s parent window is closed

In Vue applications, we often encounter situations where a component (child node) needs to perform some operations when the parent window is closed.

For example, in a modal box, we hope that when the close button of the modal box is clicked, the form will be submitted and the modal box component will be destroyed at the same time.

So in a Vue application, how do you implement child nodes to perform some operations when the parent window is closed?

Method 1: Use the $emit event

The Vue component provides the $emit method, which can be used to trigger custom events and pass data to the parent component.

In the child node, we can listen to the closing event of the parent window and then trigger a custom event:

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

In the parent window, we can bind on the child node label Listen to the event, submit the form and destroy the modal box component when closing:

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

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

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

Method 2: Use the $parent attribute

In addition to using the $emit event, we can also use the $parent attribute to Get the parent component instance, and then call the parent component's method.

In the child node, we can use the $parent attribute to get the parent component instance, and then call the parent component's closing method:

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

In the parent window, we need to modal Define a close method on the instance of the box component, and then call the method in the child node:

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

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

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

Summary

In a Vue application, the child node needs to perform some operations when the parent window is closed. , we can use the $emit event or the $parent attribute.

Using the $emit event can make the child node component more flexible and can be reused in different parent components, but it requires manually writing listening events in the parent component.

Using the $parent attribute can make the child node component more concise. You only need to call the method of the parent component, but you need to manually define the closing method in the parent component and pass it to the child node.

The above is the detailed content of How does Vue implement child nodes to perform operations when the parent window is closed?. For more information, please follow other related articles on the PHP Chinese website!