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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の親コンポーネントと子コンポーネント間の通信の例 (props、$ref、$emit)
  • Vue ミックスインの使い方の詳しい説明
  • Vue3 ミックスインの使い方
  • Vue での Mixin と extends の使用に関する詳細なチュートリアル
  • vue3 の defineProps で ref responsiveness を使用すると失敗する理由の詳細な説明
  • Vue コンポーネント共通メソッド抽出ミックスイン実装
  • Vue 親子コンポーネントのミックスイン共有に関する注意事項
  • Vue のコンポーネント化の詳細な説明 (ref、props、mixin、プラグイン)
  • Vue の ref、props、mixin 属性

<<:  MySQLでユーザーを作成し、ユーザーに権限を付与する方法の詳細なチュートリアル

>>:  Docker 用ビジュアル UI 管理ツール Portainer のインストールと使用方法の分析

推薦する

ウェブデザインにおける装飾要素の応用の概要

<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...

nginx のロケーションと書き換えの使用法の詳細な説明

1. 位置情報の利用状況の概要ロケーションは、さまざまな処理方法に対してさまざまな種類のリクエストを...

クリックして認証コードと認証を切り替えるJavaScript

この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコ...

Vue で動的パラメータと計算プロパティを使用する方法

1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...

ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...

MySQLデーモンの起動に失敗したエラーの解決方法

MySQLデーモンの起動に失敗したエラーの解決方法数日前、公開されたウェブサイトはこれらのアクティビ...

React.Childrenの詳しい使い方

目次1. React.Children.map 2. React.Children.forEach ...

VueはSplitを使用して、ユニバーサルドラッグアンドスライドパーティションパネルコンポーネントをカプセル化します。

目次序文始める基本レイアウトデータバインディングイベントバインディング最適化ジッター問題を最適化する...

Vue2.0でデータの双方向バインディング機能をjsを使って実装する

Object.definePropertyの理解文法:オブジェクト.defineProperty(o...

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...

Dockerfile echoは、指定されたファイル内の複数行のテキストを実装する方法を指定します。

Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...

要素シャトルフレームのパフォーマンス最適化の実装

目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...

Win10でのMySQL5.7.17無料インストール版の基本設定チュートリアルについて(画像とテキスト付き)

データベース アプリケーションは、アプリケーション システムに不可欠な部分です。リレーショナル デー...

Cronジョブを使用してCpanelでPHPを定期的に実行する方法

cpanel 管理バックエンドを開き、「詳細」オプションの下に「Clock Guardian Job...

Jenkins の紹介と Docker で Jenkins をデプロイする方法

1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...