Vue.js のミックスインの詳細な説明

Vue.js のミックスインの詳細な説明

ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オブジェクトには任意のコンポーネント オプションを含めることができます。コンポーネントがミックスインを使用する場合、ミックスイン内のすべてのオプションがコンポーネント自体のオプションに「ミックス」されます。

1. Mixinの基本的な使い方

これで、クリックすると数字が増加するプログラムができました。これが完成したら、データが変更されるたびに、コンソールに「データが変更されました」というプロンプトが表示されるようになることを期待します。

コード実装プロセス:

<div id="アプリ">
    <p>数値:{{数値}}</p>
    <P><button @click="add">数量を追加</button></P>
</div>


<スクリプト>
    var ログを追加 = {
    	// 更新フックをvueインスタンスにミックスする updated() {
            console.log("データが " + this.num + " に変更されます。");
        }
    }

    var アプリ = 新しい Vue({
        el: '#app',
        データ: {
            番号: 1
        },
        メソッド: {
            追加: 関数 () {
                this.num++;
            }
        },
        ミックスイン: [addLog], //mixin})
</スクリプト>     

ここに写真の説明を記入してください

ボタンをクリックすると、混合 addLog 内の更新されたメソッドがトリガーされます。

2. ミックスインの呼び出し順序

  • 実行順序としては、混入的先執行,然后構造器里的再執行
  • data内の属性とmethods内のメソッドは上書きされます構造器覆蓋混入的屬性和方法
  • ライフサイクルフックは2回呼び出され、上書きされません先調用混入鉤子再調用構造器鉤子)。

上記のコードのコンストラクターに更新されたフック関数も追加しました。

<div id="アプリ">
    <p>数値:{{数値}}</p>
    <P><button @click="add">数量を追加</button></P>
</div>


<スクリプト>
    var ログを追加 = {
        更新: 関数() {
            console.log("データが " + this.num + " に変更されます。");
        }
    }

    var アプリ = 新しい Vue({
        el: '#app',
        データ: {
            番号: 1
        },
        メソッド: {
            追加: 関数 () {
                this.num++;
            }
        },
        更新: 関数 () {
            console.log("コンストラクター内のメソッドが更新されました。")
        },
        ミックスイン: [addLog], //mixin})
</スクリプト>     

ここに写真の説明を記入してください

3. グローバルミックスイン方式

グローバル ミックスインは、ミックスインおよびコンストラクター メソッドの前に実行されます。

<div id="アプリ">
    <p>数値:{{数値}}</p>
    <P><button @click="add">数量を追加</button></P>
</div>


<スクリプト>
    Vue.mixin({
        更新: 関数 () {
            console.log('私はグローバルに混在しています');
        }
    })

    var ログを追加 = {
        更新: 関数() {
            console.log("データが " + this.num + " に変更されます。");
        }
    }

    var アプリ = 新しい Vue({
        el: '#app',
        データ: {
            番号: 1
        },
        メソッド: {
            追加: 関数 () {
                this.num++;
            }
        },
        更新: 関数 () {
            console.log("コンストラクター内のメソッドが更新されました。")
        },
        ミックスイン: [addLog], //mixin})
</スクリプト>     

ここに写真の説明を記入してください

順次要約:全局混入> 局部混入> 構造器

2つのオブジェクトキー名が競合する場合は、コンポーネントオブジェクトのキーと値のペアを取得します。

ミックスインとコンポーネント オブジェクトの両方にテスト メソッド (同じ名前) がある場合、最終的な値はコンポーネント オブジェクトのキーと値のペアになります。

  <div id="アプリ">
      <p>数値:{{数値}}</p>
      <P>
          <button @click="add">数量を追加</button>
      </P>
  </div>

  <スクリプト>
      var ログを追加 = {
          更新: 関数 () {
              console.log("データが " + this.num + " に変更されます。");
              これをテストします。
          },
          メソッド: {
              テスト: 関数 () {
                  console.log('ミックスインでのテスト')
              }
          }
      }

      var アプリ = 新しい Vue({
          el: '#app',
          データ: {
              番号: 1
          },
          メソッド: {
              追加: 関数 () {
                  this.num++;
              },
              テスト:関数(){
                  console.log('コンポーネントオブジェクト内のテスト')
              }
          },
          ミックスイン: [addLog], //mixin})
</スクリプト>

ここに写真の説明を記入してください

Vue.js ミックスインに関する記事はこれで終わりです。Vue.js ミックスインについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js の Mixin を詳しく見る
  • Vue.js Mixinの詳しい説明
  • Vue.js で Mixin を使用する方法

<<:  Linux のごみ箱メカニズムの実装プロセスと使用方法の詳細な説明

>>:  ZabbixはSNMPに基づいてLinuxホストを監視します

推薦する

MySQL インポートおよびエクスポートのバックアップの詳細

目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...

WindowsでのMySQLインストールチュートリアルの詳細な紹介

目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...

この記事ではJavaScriptのガベージコレクションの仕組みを説明します

目次1. 概要2. メモリ管理3. ガベージコレクション4. GCアルゴリズムの紹介5. 参照カウン...

Reactのコンポーネント作成方法のまとめ

目次1. 関数を使用してコンポーネントを作成する2. クラスを使用してコンポーネントを作成する3. ...

Vue3コンポーネントの開発詳細

目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

MySQL パーティション テーブルに関するパフォーマンス バグ

目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...

Dockerオーバーレイはホスト間のコンテナ相互通信を実現します

目次1. Dockerの設定2. レジストリとネットワークを作成する3. コンテナを起動する環境説明...

MySQLの共同クエリ最適化メカニズムの詳細な説明

目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...

Linux システムでの CPU 使用率が高い場合のトラブルシューティングのアイデアと解決策

序文Linux 運用保守エンジニアとして、日々の業務の中で Linux サーバーの CPU 負荷が ...

MySQL の選択、挿入、更新バッチ操作ステートメントのコード例

プロジェクトでは、データを操作するためにバッチ操作ステートメントが必要になることがよくあります。バッ...

Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする

戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...

CSS3アニメーション属性に基づくWeChatタップアニメーション効果の実装

最近人気のWeChatタップ機能を見て、CSS3アニメーションを見直し、このボックスシェイクアニメー...

MySQLのストレージエンジンの詳細な説明

MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...

docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...