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 における tinyint と int の違いの詳細な説明

質問: int(1) と tinyint(1) の違いは何ですか?このような設計では、いずれにしても...

MySQL 8.0.22 圧縮パッケージの完全なインストールと構成のチュートリアル図 (テスト済みで効果的)

1. zipインストールパッケージをダウンロードするMySQL サーバー 8.0.22 の圧縮パッ...

MySQLでデータテーブルを作成するときにエンジンMyISAM/InnoDBを設定する

mysql を構成するときに、構成ファイル内のデフォルトのストレージ エンジンを InnoDB に設...

JVMシリーズのメモリモデルの詳細な説明

目次1. メモリモデルとランタイムデータ領域2. マインドマップと凡例3. オブジェクトはJVMから...

Linux のファイル圧縮とパッケージ化の概要

1. 圧縮と包装の概要一般的な圧縮ファイルウィンドウズ .rar .zip .7z Linux .z...

nginxはdockerコンテナ内に設定ファイルを自動的に生成します

企業が Docker 自動デプロイメントを構築する場合、Docker の実行時にコンテナ内の設定ファ...

nginx「504 ゲートウェイタイムアウト」エラーを解決する

ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...

Zabbix を使用して Oracle データベースを監視する方法の詳細な説明

1. 概要Zabbix は非常に強力で、最も広く使用されているオープンソースの監視ソフトウェアです。...

NFS サーバーの原理と、その構築、構成、展開の手順を簡単に分析します。

目次NFS サービスの概要NFS とは何ですか? NFS マウントの原則NFS サーバーはデータ転送...

エラー 1862 (HY000): パスワードの有効期限が切れています。ログインするには、..... を使用してパスワードを変更する必要があります。

エラーメッセージ:エラー 1862 (HY000): パスワードの有効期限が切れています。ログインす...

VMwareがモジュールディスクを早期に開けない場合の解決策の詳細な説明

VMWare (Virtual Machine ware) は、「仮想 PC」ソフトウェア会社です。...

mysqlは指定された期間内の統計データを取得します

mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...

HTML フォームを送信するいくつかの方法_PowerNode Java Academy

方法1: 送信ボタンから送信する <!DOCTYPE html> <html>...

flexとは何か、flexレイアウト構文の詳細なチュートリアル

フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...

MySql の忘れたパスワードの変更方法はバージョン 5.7 以上に適しています

1. まずmysqld.exeプロセスを停止します2. cmd を開き、mysql の bin ディ...