Vueでミックスインを使用する方法

序文

Vue にはコードの再利用に使われる mixins という設定項目があります。同時に、このミックスインはローカルミックスインとグローバルミックスインに分けられます。

vue での説明は以下のとおりです。言語がつまらないと思われる場合は読み飛ばしていただいて構いません。

Mixin: Vue コンポーネントで再利用可能な機能を配布する非常に柔軟な方法です。 Mixin オブジェクトには任意のコンポーネント オプションを含めることができます。コンポーネントがミックスイン オブジェクトを使用すると、ミックスイン オブジェクトのすべてのオプションがコンポーネント独自のオプションに混合されます。アプリケーションシナリオ

まず、ミックスインのアプリケーション シナリオについて説明します。現在 2 つのコンポーネントがあるとします。これらの 2 つのコンポーネントがクリックされると、どちらもデータ内の name 属性の値を console.log に記録する必要があります。

最初のコンポーネントは、以下に示すように、学校のコンポーネントです。

2番目の要素は学生要素である

2 つの異なるコンポーネントに同じ機能を持つメソッドがあることがわかります。この書き方では、2 つのコンポーネントに同じコードを記述することになります。2 つのコンポーネントであれば問題ありませんが、そのような機能を必要とするコンポーネントが 200 個あると煩わしくなります。このような場合、ミックスインを使用してコードを再利用できます。

使い方

1. ミックスインファイルを作成し、対応するデータを公開する

公開されているので、もちろんコンポーネントとして他の人が使用できるようにする必要があります

2. まず、ローカル ミックスインについて説明します。ローカル ミックスインとは、VueComponet を 1 つずつミックスインすることを意味します。グローバル ミックスインは、もちろん、Vue (Vm) オブジェクトにミックスインします。

ローカルミックスインの書き方はこちら

同様に、学生のコンポーネントについても同じことを行います。

完了後、クリックすると、関数は同じように完了します。showNameメソッドは、ミックスインを通じてミックスインしたもので、一度だけ記述しました。

上記はローカルミックスインであり、すべてのVueComponetにミックスする必要があります。

3. グローバル ミックスインについてお話しします。これを Vue オブジェクトにミックスします。こうすることで、Vue 配下のすべてのコンポーネントにこのメソッドが備わり、コンポーネントごとに記述する必要がなくなります。この記述方法は、すべてのコンポーネントにこのメソッドまたは属性が必要であると判断された場合に使用します。通常は、この方法では使用しません。

方法は次のとおりです

main.js ファイルにインポートする

上記はグローバルミキシングですが、すべてのコンポーネント、すべてのコンポーネント、すべてのコンポーネントが混合されるため、一般的にはあまり使用されません。 そのような需要はめったにない

最後に、ミックスインされたメソッド、プロパティ、フック関数がすでにローカルに存在し、競合が発生した場合に何が起こるかについて説明します。このコンポーネントに、ミックスインされたメソッドやプロパティと同じ名前のメソッド、プロパティ、フック関数がある場合、このコンポーネントのメソッドやプロパティが優先され、ミックスインされたメソッドやプロパティは無効になります。

ただし、ライフサイクル フック機能は、このコンポーネント内にあるか、ミックスインされているかに関係なく有効になり、最初にミックスインされたライフサイクル フックが実行され、その後、このコンポーネントのライフサイクル フックが実行されます。

要約する

Vue での mixin の使い方に関する記事はこれで終わりです。Vue での mixin の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。