Vue.jsのEmit関数

Vue コンポーネントには、カスタム イベントをコンポーネント ツリーに渡すことができる$emit()機能があります(1)。

通常、エミット関数は、子コンポーネントで何かが変更されたことを親コンポーネントに通知します。

例を使用して、エミット関数について詳しく説明します。

<SearchJokes /> として子コンポーネントがあります。これは、入力として入力されたものとしてジョークをフィルタリングするコンポーネントです。ジョークは、一般的なジョークをすべて含む大きな配列です。

私の親コンポーネントは index.vue.js です。

すべてのジョークデータをフィルタリングできるようにするには、axiosフェッチを介して親コンポーネントにすべてのジョークデータがあるため、親コンポーネント内のデータを変更する必要があります。このため、searchJokes から index に関数を取り込む必要があります。これは、子コンポーネントから親コンポーネントへの機能です。

SearchJokes コンポーネントには入力があり、この入力にはそこに入力するテキストしかありません。このテキストを使用して、親コンポーネントにある大きな配列をフィルタリングできます。

これが SearchJokes (子コンポーネント) です。

上の画像の20行目にあるように、this。$ emit（ 'search-text'、this.text）関数があります。

この関数は、親コンポーネントへの単なるキャリー可能な関数です。これは、親コンポーネントにテキスト検索機能があることを意味します。そこにある親コンポーネントを見てみましょう。

以下の写真を見ると、子コンポーネントについて主に 2 つのことがわかります。<SerachJokes v-on：search-text =” searchText” />

子コンポーネントで名前 search-text を string として記述したことを覚えているように、ここでは mparent コンポーネント名が一致する必要があるため、ここで説明しました。

v-on:search-text は searchText です。つまり、searchText という名前の新しい名前を親コンポーネントに書き留める必要があります。ところで、v-on は単なるイベント リスニングです。つまり、親メソッド名 searchText メソッドで検索テキスト イベントをリッスンしています。

さらに、this.$emit('searchText', this.text) のように、searchText と同じ名前を子コンポーネントに入れることもできます。これは、searct-text と入力するのと同じように機能する可能性があります。これは、メソッドに付ける単なる名前です。

親コンポーネントに入力する必要がある searchText メソッド。

searchText メソッドを記述した後、新しいフィルター関数を使用する準備が整いました。フィルターに悪いと入力すると、すべてのジョークに悪い言葉が含まれていました。

この例では、1 つのトラベリー メディアの YouTube ビデオを取り上げました。リンクはリソースにあります。

リソース:

リソース (1)