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 におけるデフォルトの使用法の詳細な説明

推薦する

ウェブページのグリッドデザインを考える

<br />元のアドレス: http://andymao.com/andy/post/8...

フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 1

デザイナーは独自のフォント ライブラリを持っているため、プロジェクトの設計時にすぐに使用できます。今...

優秀なウェブ開発者が開発スキルを向上させるために知っておくべき10のこと

「開発とは、単にコードを書くだけではない」というのは、3EV の Dan Frost 氏の言葉です。...

VUE+Canvasは、インゴットを受け取る富の神のゲームを実装します

前回のキャンバス ゲーム シリーズへようこそ: 《VUEがFlappy Birdを実装しました〜〜〜...

ウェブページを作る前に、これらのいわゆる仕様を見てみましょう

この記事では、Web ページを作成する前に確認すべき、いわゆる仕様をいくつかまとめました。皆様のお役...

Vueコンポーネント登録方法の解釈

目次概要1. グローバル登録2. 現地登録3. モジュールシステムへのローカル登録概要コンポーネント...

JSブラウザイベントモデルの詳細な説明

目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...

40以上の美しいWebフォームデザイン例

Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...

VirtualBox を使用して Mac 上にローカル仮想マシン環境を構築する方法

1. ビッグデータとHadoopビッグデータについて研究し学ぶには、当然 Hadoop から始める必...

SNMP4J サーバー接続タイムアウト問題の解決策

弊社のネットワーク管理センターは管理センター兼サーバーとして機能します!各管理対象デバイスは、TCP...

FTP環境設定ソリューション(vsftpd)の詳細な説明

1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...

JSはキャンバス技術を使用してeChartsの棒グラフを模倣します

Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...

ウェブサイトの再設計はどの家族にとっても難しい作業です

<br />どの家庭にもそれぞれの問題があり、改訂はどの IT 企業にとっても問題の 1...

オブジェクトアニメーションによってブロックされずにオブジェクトに div を表示する方法

今日はメニューボタンを作りました。マウスをボタンに移動するすると、ドロップダウンサブメニューが表示さ...