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
.
<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でのコンポーネント通信に関する知識を深めたい場合は、この記事を読んでください。