Vueカスタムイベントの紹介

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

Vueは要素のイベントをリッスンし、そのようなイベントが発生したときに特定の関数を実行するようにトリガーできることを私たちは知っています。 Vue.jsでは、カスタムイベントをリッスンすることもできます。これは、親コンポーネントがリッスンできるイベントを子コンポーネントが起動できるようにするための最も重要なユースケースを持つ機能です。

Vueテンプレート構文の記事で簡単なフォトギャラリーコンポーネントを作成しました。サムネイルの行にある写真のいずれかをクリックすると、クリックした写真が下に大きなサイズで表示されます。では、ページ全体の背景を、表示されている写真の平均的な色に設定したい場合はどうでしょうか。これはシアターモードのように呼ぶことができます。

カスタムイベントの力は、それをかなり簡単に実行できることです。フォトギャラリーの親コンポーネント、 App.vue、子コンポーネントから写真の平均RGB値を受け取る必要があります。 PhotoGallery.vue、写真をクリックしたとき。

始めましょう。このチュートリアルでは、テンプレート構文チュートリアルが中断したところを取り上げます。

アプリのセットアップ

この前の投稿と同じセットアップを使用してみましょう。

カスタムイベントコードを書いてみましょう

を使用します npm 特定の写真の平均カラー値を取得するためのfast-average-colorというライブラリ。上部にインポートします <script> のセクション PhotoGallery.vue.

import from 'fast-average-color';

私たちの PhotoGallery.vue コンポーネントには、現在、メソッドがあります。 highlight()、写真の1つをクリックするとトリガーされます。

highlight() {
  event.target.id = "theater";
  this.theatrical = event.target.src;
  let eventIterator = event.target.parentNode;
  while (eventIterator.previousElementSibling != null) {
    eventIterator.previousElementSibling.getElementsByTagName('img')[0].id = "";
    eventIterator = eventIterator.previousElementSibling;
  }
  eventIterator = event.target.parentNode;
  while (eventIterator.nextElementSibling != null) {
    eventIterator.nextElementSibling.getElementsByTagName('img')[0].id = "";
    eventIterator = eventIterator.nextElementSibling;
  }
}

この方法では、クリックした写真がサムネイルの下に大きなサイズで表示されます。使用したことに注意してください event.target メソッド全体。 event.target クリックされた要素です。これは、平均色を取得したい画像です。

熟読することによって fast-average-color ドキュメント、私たちは見つけることができます getColorAsync 関数。カラーオブジェクトを返します。 color.rgba は平均RGB値です。先に進んで、その関数呼び出しを行いましょう。

const fac = new FastAverageColor();

fac.getColorAsync(event.target)
  .then(function(color) {
  })
  .catch(function(e) {
    console.log(e);
  });

まだ何もしていません color. 最終的には、背景色をに設定する必要があります color.rgba の App.vue. App.vue を取るメソッドがあります color.rgba 引数として。先に進んでそのメソッドを書いてみませんか？

methods: {
  setBackground(rgba) {
    document.querySelector('body').style.backgroundColor = rgba;
  }
}

それはあなたに似合うはずです！

のテンプレートセクションをご覧ください App.vue. 現在の外観は次のとおりです。

<template>
  <div id="app">
    <PhotoGallery />
  </div>
</template>

The App コンポーネントは、からイベントを取得する必要があります PhotoGallery コンポーネント、カスタムイベント。イベントが呼び出されたと言う theater-mode; コンポーネントでこのようなイベントをリッスンする場合、構文は通常のイベントの場合と同じです。つまり、次のようになります。 v-on:theater-mode. いつ theater-mode 発生します setBackground 方法。

次に、値を送信する必要があります color.rgba に App.vue 何とかして。帰ります PhotoGallery.vue.

すべてのVueコンポーネントにはメソッドがあります $emit. このメソッドを使用すると、イベントをトリガーできます。この場合は、 theater-mode. 電話します this.$emit 中 then カラーライブラリに対して行った非同期呼び出しからの関数。あなたの記憶をジョギングしましょう。

highlight() {
  event.target.id = "theater";
  this.theatrical = event.target.src;
  let eventIterator = event.target.parentNode;
  while (eventIterator.previousElementSibling != null) {
    eventIterator.previousElementSibling.getElementsByTagName('img')[0].id = "";
    eventIterator = eventIterator.previousElementSibling;
  }
  eventIterator = event.target.parentNode;
  while (eventIterator.nextElementSibling != null) {
    eventIterator.nextElementSibling.getElementsByTagName('img')[0].id = "";
    eventIterator = eventIterator.nextElementSibling;
  }
  const fac = new FastAverageColor();
  fac.getColorAsync(event.target)
    .then(function(color) {
    })
    .catch(function(e) {
      console.log(e);
    });
}

this.$emit イベント名を最初の引数として取り、データを渡すことができるオプションの追加の引数があります。合格します color.rgba. したがって、関数呼び出しは次のようになります。 this.$emit('theater-mode', color.rgba). 新しい関数は次のとおりです。

highlight() {
  event.target.id = "theater";
  this.theatrical = event.target.src;
  let eventIterator = event.target.parentNode;
  while (eventIterator.previousElementSibling != null) {
    eventIterator.previousElementSibling.getElementsByTagName('img')[0].id = "";
    eventIterator = eventIterator.previousElementSibling;
  }
  eventIterator = event.target.parentNode;
  while (eventIterator.nextElementSibling != null) {
    eventIterator.nextElementSibling.getElementsByTagName('img')[0].id = "";
    eventIterator = eventIterator.nextElementSibling;
  }
  const fac = new FastAverageColor();
  fac.getColorAsync(event.target)
    .then((color) => this.$emit('theater-mode', color.rgba))
    .catch(function(e) {
      console.log(e);
    });
}

それはあなたに似合うはずです！振り返ってみましょう App.vue.

App.vue

<template>
  <div id="app">
    <PhotoGallery/>
  </div>
</template>

<script>
import PhotoGallery from './components/PhotoGallery.vue'

export default {
  name: 'App',
  components: {
    PhotoGallery
  },
  methods: {
    setBackground(rgba) {
      document.querySelector('body').style.backgroundColor = rgba;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

私たちはすでにそれを聞いて議論しました theater-mode イベントは次のようになります v-on:theater-mode. カスタムイベントをリッスンすると、を介して渡されたすべてのデータにアクセスできます。 $event.

したがって、次のように記述します。

<template>
  <div id="app">
    <PhotoGallery v-on:theater-mode="setBackground($event)"/>
  </div>
</template>

おめでとう！

カスタムイベントを正常に発行し、親コンポーネントからそれをリッスンし、イベントから発行された値にアクセスしました。ブラウザを確認してください。アプリは意図したとおりに機能するはずです。お疲れ様でした！ 🚢

Vueでのコンポーネント通信に関する知識を深めたい場合は、この記事を読んでください。

getdocs

13036