Mixin は、再利用可能な機能を Vue コンポーネント間で分散する非常に柔軟な方法を提供します。ミックスイン オブジェクトには任意のコンポーネント オプションを含めることができます。コンポーネントがミックスインを使用する場合、ミックスインのすべてのオプションがコンポーネント自体のオプションに「混合」されます。 つまり、ミックスインがコンポーネントに導入されると、データ、メソッド、その他の属性など、コンポーネント内のコンテンツが親コンポーネントの対応するコンテンツとマージされます。これは、導入後、親コンポーネントのすべてのプロパティ メソッドが拡張されたことを意味します。 たとえば、2 つの異なるコンポーネントで sayHi メソッドを呼び出すには、定義を繰り返し行う必要があります。メソッドが複雑な場合は、コードが冗長になりますが、ミックスインを使用すると比較的簡単になります。 まず、mixin.js ファイルで mixin オブジェクトを定義します。 ミックスイン = { データ () { 戻る { ユーザー名: 'mixin' } }, 作成された(){ this.sayHello() }, メソッド: { こんにちは(){ console.log(`${this.userName}, welcome`) } } } デフォルトのミックスインをエクスポートする 次に、2 つのコンポーネントを定義し、それぞれコンポーネントに導入します。 <スクリプト> '../mixin' から mixin をインポートします エクスポートデフォルト{ ミックスイン: [ミックスイン] } </スクリプト> 両方のコンポーネントの印刷結果は次のようになります。 2 つのコンポーネント データで userName が定義されている場合、印刷された結果は各コンポーネントの userName を参照します。 2 つのコンポーネントのメソッドで同じメソッドが繰り返し定義されている場合、ミックスイン内のメソッドは上書きされます。 コンポーネントの 1 つに対して独自の userName メソッドと sayHi メソッドを定義します。 <スクリプト> '../mixin' から mixin をインポートします エクスポートデフォルト{ ミックスイン: [ミックスイン], データ() { 戻る { ユーザー名: 'BComponent' } }, 作成された(){ this.sayHello() }, メソッド: { こんにちは(){ console.log(`こんにちは、${this.userName}`) } } } </スクリプト> 次に結果を出力します。 これは、複数のコンポーネントで使用できる vue パブリック メソッドを登録するのに少し似ています。もうひとつのポイントは、プロトタイプオブジェクトにメソッドを登録するのと似ており、同じ関数名でメソッドを定義して上書きすることができます。 ミックスインはグローバルに登録することもできますが、Vue インスタンスを汚染するため、通常はグローバルには使用されません。 私は通常、プロジェクトでこれを使用します。たとえば、ユニバーサル セレクターが複数のコンポーネントで使用される場合、オプションは yes、no です。mixin を使用して統合辞書項目フィルターを追加し、オプションのエコーを実現できます。 1. まず、辞書項目の意味を保存して公開するための Dictionary.js ファイルを作成します。 エクスポートconst COMMON_SELECT = [ { コード: 0、ラベル: 'はい'}, { コード: 1、ラベル: 'いいえ'} ]; 注: ここで作成された Dictionary.js ファイルは、ページがレンダリングされるときにオプションをループするためにも使用できます。具体的なコードは次のとおりです。 '../constants/Dictionary.js' から { COMMON_SELECT } をインポートします。 エクスポートデフォルト{ データ() { 戻る { comSelectオプション: COMMON_SELECT } } } <v-mode="selStatus" を選択"> <el-option v-for="comSelectOptions 内の項目" :key="item.code" :label="item.label" :value="item.code"></el-option> </選択> 2. 次に、カスタム フィルター関数を保存するための filter.js ファイルを作成します。 '../constants/Dictionary.js' から { COMMON_SELECT } をインポートします。 エクスポートデフォルト{ フィルター: comSelectFilter: (値) => { const ターゲット = COMMON_SELECT.filter(item => { アイテムコード === 値を返す }) target.length ? target[0].label : 値を返す } } } 3. 最後に、main.js に filter メソッドを 1 回導入します。 './mixin/filter' からフィルターをインポートします Vue.mixin(フィルター) ああ、今ではどのコンポーネントでも使用できます。 <テンプレート> <div> .... {{ ステータス | comSelectFilter }} .... </div> </テンプレート> 上記は、vue での mixin の適用に関する詳細な説明です。vue での mixin の適用の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux システムによって報告される tcp_mark_head_lost エラーの処理方法
序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...
ユーザー名前空間は Linux 3.8 で追加された新しい名前空間で、ユーザー ID やグループ I...
1. VMware 15.5から新しい仮想マシンを作成する1. VMware を開き、ホームページで...
目次ZabbixはNginxを監視するZabbixはTomcatを監視するZabbixはMySQLを...
目次序文: 1. 役割の紹介2. 役割に関連する操作要約:序文:前回の記事では、MySQLの権限管理...
最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...
ant-design-vue テーブルのスケーラブルな列の問題に対する完璧なソリューション。固定列と...
<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...
シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...
1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...
前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...
ブラウザが IE のどのバージョンであるかを検出するためによく使用される JavaScript コー...
AES暗号化の使用データ転送の暗号化と復号化処理 --- AES.js最初のステップ: vue に ...
タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...
目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...