イベントとしてのVue.jsコンポーネントフック

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

こんにちはVue開発者！確かに、コンポーネントが作成、マウント、または破棄されたときにさまざまなアクションを実行するために、Vueでライフサイクルフックをすでに使用しています。また、コンポーネントとその親の間の通信にカスタムイベントを使用したこともあります。

しかし…Vueのライフサイクルフックが独自のカスタムイベントを発行することをご存知ですか？ええ、それはダミアン・デュリスがこのツイートで示したものであり、啓発的でした。

あなたは考えているかもしれません…なぜ私は気にする必要があります、アレックス？まあ、場合によっては役立つトリックを知っておくのは良いことです。この記事では、それらのいくつかを紹介します。

子供のフックを聞く

Vueのライフサイクルフックは、フック自体の名前にプレフィックスが付いたカスタムイベントを発行します hook:. たとえば、 mounted フックは放出します hook:mounted イベント。

したがって、カスタムイベントの場合と同じように、親コンポーネントから子フックをリッスンできます。

<template>
  <Child @hook:mounted="childMounted"/>
</template>

<script>
import Child from "./Child";

export default {
  components: { Child },
  methods: {
    childMounted() {
      console.log("Child was mounted");
    }
  }
};
</script>

これは、サードパーティのプラグインフックに反応する場合にも役立ちます。たとえば、 v-runtime-template がテンプレートのレンダリングを終了したときにアクションを実行する場合は、 @hook:updated イベント：

<template>
  <v-runtime-template @hook:updated="doSomething" :template="template"/>
</template>

魔法のようですね、ハ？おそらく、あなたはすでにこれらのケースに遭遇していて、フックが呼び出されたことを親に知らせるためだけに子にフックを作成しました。さて、あなたはそれが必要ではないことを知っています。

フックを動的に登録する

まれですが、カスタムイベントを動的に作成するのと同じ方法で、フックを動的に登録する必要がある場合があります。あなたはを使用してそれを行うことができます $on, $once と $off フック。

Damianのツイートから抜粋した次の例を見て、 beforeDestroy Pickaday のラッパーVueコンポーネントを作成しているため、動的にフックします。これは、プレーンなJavaScript日付ピッカーライブラリです。

プラグインはマウントされたフックで作成する必要があり、インスタンスをリアクティブ状態変数に保存しないため、プラグインを使用して何かを行う唯一の方法は、プラグインを登録することです。 beforeDestroyed Pickadayインスタンスを作成した直後にフックします。

export default {
  mounted() {
    const picker = new Pickaday({
      // ...
    });

    this.$once("hook:beforeDestroy", () => {
      picker.destroy();
    })
  }
};

まとめ

あなたはを使用するトリックを見てきました hook: イベントを手動で発行する必要なしに、フック呼び出しに反応するイベント。

この記事のコードとデモは、このコードサンドボックスで見ることができます。

getdocs

13036