Vue は、親ウィンドウが閉じているときに操作を実行するために子ノードをどのように実装しますか?

Vue 子ノードの親ウィンドウが閉じている

Vue アプリケーションでは、親ウィンドウが閉じているときにコンポーネント (子ノード) が何らかの操作を実行する必要がある状況によく遭遇します。

たとえば、モーダル ボックスでは、モーダル ボックスの閉じるボタンをクリックすると、フォームが送信され、同時にモーダル ボックス コンポーネントが破棄されることを望みます。

それでは、Vue アプリケーションで、親ウィンドウが閉じているときにいくつかの操作を実行するために子ノードを実装するにはどうすればよいでしょうか?

方法 1: $emit イベントを使用する

Vue コンポーネントには $emit メソッドが用意されており、これを使用してカスタム イベントをトリガーし、データを親コンポーネントに渡すことができます。

子ノードでは、親ウィンドウの終了イベントをリッスンして、カスタム イベントをトリガーできます。

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

親ウィンドウでは、子ノードのラベル「Listen」にバインドできます。イベントにフォームを送信し、閉じるときにモーダル ボックス コンポーネントを破棄します。

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

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

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

方法 2: $parent 属性を使用します

$emit イベントの使用に加えて、次のメソッドも使用できます。 $parent 属性を使用して親コンポーネントのインスタンスを取得し、親コンポーネントのメソッドを呼び出します。

子ノードでは、$parent 属性を使用して親コンポーネントのインスタンスを取得し、親コンポーネントの終了メソッドを呼び出すことができます。

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

親ウィンドウでは、モーダルにする必要があります。ボックス コンポーネントのインスタンスで close メソッドを定義し、子ノードでメソッドを呼び出します。

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

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

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

summary

Vue アプリケーションでは、次の場合に子ノードでいくつかの操作を実行する必要があります。親ウィンドウが閉じている場合は、$emit イベントまたは $parent 属性を使用できます。

$emit イベントを使用すると、子ノード コンポーネントの柔軟性が高まり、別の親コンポーネントで再利用できますが、親コンポーネントでリッスン イベントを手動で記述する必要があります。

$parent 属性を使用すると、子ノード コンポーネントをより簡潔にできます。親コンポーネントのメソッドを呼び出すだけで済みますが、親コンポーネントで終了メソッドを手動で定義し、それをコンポーネントに渡す必要があります。子ノード。

以上がVue は、親ウィンドウが閉じているときに操作を実行するために子ノードをどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。