Vue での mixin の応用について議論する

Vue での mixin の応用について議論する

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueでミックスインを使用する方法
  • Vue のミックスインの使用方法の詳細な説明
  • Vue.js の Mixin を詳しく見る
  • Vue ミックスインのスクロール ボトム メソッド
  • Vue Mixinsの使い方
  • Vue ミックスインの詳しい説明

<<:  Linux システムによって報告される tcp_mark_head_lost エラーの処理方法

>>:  MySQL におけるデフォルトの使用法の詳細な説明

推薦する

Linux で Squid プロキシ サーバーを構築するための完全な手順

序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...

Linux 名前空間ユーザーの詳細な説明

ユーザー名前空間は Linux 3.8 で追加された新しい名前空間で、ユーザー ID やグループ I...

VMware 15.5 バージョンのインストール Windows_Server_2008_R2 システム チュートリアル図

1. VMware 15.5から新しい仮想マシンを作成する1. VMware を開き、ホームページで...

Zabbix を使用して Nginx/Tomcat/MySQL を監視する方法の詳細なチュートリアル

目次ZabbixはNginxを監視するZabbixはTomcatを監視するZabbixはMySQLを...

MySQL ロール関数の紹介

目次序文: 1. 役割の紹介2. 役割に関連する操作要約:序文:前回の記事では、MySQLの権限管理...

透明な入力ボックスにアイコンを追加する HTML コード

最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...

スケーラブルな列の完全な例を実現するための Ant 設計 Vue テーブル

ant-design-vue テーブルのスケーラブルな列の問題に対する完璧なソリューション。固定列と...

未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント

<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...

ネイティブ Js で実装されたシンプルなシームレス スクロール カルーセルのサンプル コード

シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...

Linux で JDK 環境を構成する方法

1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...

Promise カプセル化 wx.request メソッド

前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...

IE6かどうかを判定する最短JS(IEの書き方)

ブラウザが IE のどのバージョンであるかを検出するためによく使用される JavaScript コー...

Vue で AES.js を使用する詳細な手順

AES暗号化の使用データ転送の暗号化と復号化処理 --- AES.js最初のステップ: vue に ...

HTML のタイトル、段落、改行、水平線、特殊文字についての簡単な説明

タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...

MySQLの使い方の詳細な説明

目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...