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 のインストールと使用方法の分析

推薦する

JS でオブジェクトが空オブジェクトかどうかを判断する 5 つの方法

1. jsonオブジェクトをjson文字列に変換し、文字列が「{}」であるかどうかを判断します。 v...

nginx を使用して http を https に変換するサンプルコード

最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...

CSS の子要素を親要素と高い一貫性を持たせる方法

絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...

Xtrabackup を使用した MySQL バックアップ プロセスの詳細な説明

目次01 背景02 はじめに03 ワークフロー04 いくつかの質問05 ファイルをバックアップする0...

クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法

前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...

MySql 5.7.20 のインストールとデータおよび my.ini ファイルの構成

1. まずMySqlの公式サイトからダウンロードします参考: https://www.jb51.ne...

Linux 編集の開始、停止、再起動の Springboot jar パッケージ スクリプトの例

序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...

Nginxのアクセスボリューム制御の詳細な説明

目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...

カルーセル効果を実現するネイティブJavaScript

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

...

MySQL で浮動小数点データを文字データに変換するときに起こりうる問題の詳細な説明

序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...

MYSQLでプロシージャの名前を変更する方法の詳細な説明

最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...

Win7 の VMware 仮想マシンに Linux7.2 をインストールするインターネット アクセス構成チュートリアル

参考までに、win7システム上のVMware仮想マシンにlinux7.2インターネットアクセス構成を...

Vueは複数列レイアウトドラッグを実装します

この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...

5 分で vue-cli3 を使用してプロジェクトを作成する方法を説明します (初心者向けガイド)

目次1. Vue環境を構築する2. Vue スキャフォールディングツール3. プロジェクトを作成する...