Vue ミックスインの使い方の詳しい説明

Vue ミックスインの使用

機能: コンポーネントが導入された後、データやその他のメソッド、メソッドやその他の属性など、コンポーネント内のコンテンツは、親コンポーネントの対応するコンテンツとマージされます。これは、導入後に親コンポーネントのさまざまなプロパティメソッドを拡張することと同じです。
データデータの平等アクセス原則: ミックスインを使用している現在のコンポーネントにデータまたはメソッドがある場合は、現在のコンポーネントのデータまたはメソッドが直接使用され、それ以外の場合はミックスイン内のデータとメソッドが直接継承されます。
注: 共有変数を定義して、各コンポーネントで使用することができます。コンポーネントに導入された後、各変数は互いに独立しており、値の変更はコンポーネント内で互いに影響しません。
注2 ：Mixinは、コンポーネントが導入された後にコンポーネント内のオブジェクトやメソッドとマージされ、親コンポーネントのデータやメソッドなどを拡張することと同等であり、新しいコンポーネントを形成すると理解できます。

ミックスインでのデータアクセス

ミックスイン/index.js

エクスポートデフォルト{
  データ （） {
    戻る {
      メッセージ: 「私は mixin のメッセージです」
    }
  },
  作成された（）{
  },
  マウントされた（）{}、
  メソッド: {
  }
}

ホーム.vue

ホームコンポーネントでのミックスインの使用

<テンプレート>
  <div>
    <div>home -- {{ msg }}</div> /* home によって変更されたメッセージ */
  </div>
</テンプレート>
<スクリプト>
「@/mixin/index.js」からミックスインをインポートします。
エクスポートデフォルト{
  名前: "ホーム",
  ミックスイン: [ミックスイン],
  データ（） {
    戻る { };
  },
  作成された() {
    // mixin のデータを取得します console.log("home print", this.msg); //home は mixin の msg を出力します
    // ミックスインのデータを変更します。this.msg = "home によって変更されたメッセージ";
    console.log("home print", this.msg); // home は home によって変更されたメッセージを出力します
  },
  メソッド: {
  },
};
</スクリプト>
<style lang="scss" スコープ>
</スタイル>

2.vueについて

<テンプレート>
  <div>
    <div>about2 -- {{ msg }}</div> /* about2 によって変更されたメッセージ */
  </div>
</テンプレート>
<スクリプト>
「@/mixin/index.js」からミックスインをインポートします。
エクスポートデフォルト{
  名前: "About2",
  ミックスイン: [ミックスイン],
  コンポーネント: {},
  データ（） {
    戻る {
      メッセージ: "ローカルメッセージ",
    };
  },
  作成された() {
    console.log("print about2", this.msg); // ローカルメッセージ
    this.msg = "about2 によって変更されたメッセージ";
    console.log("print about2", this.msg); // about2 によって変更されたメッセージ
    // 最後のページにはabout2の変更されたメッセージデータが表示されます},
  メソッド: {
  },
};
</スクリプト>
<style lang="scss" スコープ>
</スタイル>

ミックスインにおけるメソッドと計算された使用法

ミックスイン/index.js

エクスポートデフォルト{
  データ （） {
    戻る {
      メッセージ: 「私は mixin のメッセージです」
    }
  },
  作成された() { },
  マウントされた（）{}、
  計算: {
    ユーザー名() {
      「私は計算属性 UserName です」を返します。
    },
  },
  メソッド: {
    ヒントメッセージ() {
      console.log("minxin の tipMsg メソッド", this.msg);
    },
    ヒント情報 (情報) {
      console.log("minxin の tipInfo メソッド", info);
    }
  }
}

ホーム.vue

<テンプレート>
  <div>
    <div>ホーム --- msg-{{ msg }} UserName-{{ UserName }}</div>
    /* ホーム --- msg UserName-I は計算属性の UserName です */
  </div>
</テンプレート>
<スクリプト>
「@/mixin/index.js」からミックスインをインポートします。
エクスポートデフォルト{
  名前: "ホーム",
  ミックスイン: [ミックスイン],
  コンポーネント: {},
  データ（） {
    戻る {};
  },
  作成された() {
    // mixin のデータを取得します console.log("home print", this.msg); //home は mixin の msg を出力します
    // ミックスインのデータを変更します。this.msg = "home によって変更されたメッセージ";
    console.log("home print", this.msg); // home は home によって変更されたメッセージを出力します
    // mixin の tipMsg メソッドを呼び出す this.tipMsg(); // minxin の tipMsg メソッドによって変更されたメッセージ
    this.tipInfo("私はホーム ルーキー情報です"); // minxin の tipInfo メソッド 私はホーム ルーキー情報です
  },
  メソッド: {},
};
</スクリプト>
<style lang="scss" スコープ>
</スタイル>

2.vueについて

<テンプレート>
  <div>
    <div>about2 -- {{ msg }} ユーザー名-{{ ユーザー名 }}</div>
    /* about2 -- about2 の変更されたメッセージ UserName-I は計算された属性 UserName です */
  </div>
</テンプレート>
<スクリプト>
「@/mixin/index.js」からミックスインをインポートします。
エクスポートデフォルト{
  名前: "About2",
  ミックスイン: [ミックスイン],
  コンポーネント: {},
  データ（） {
    戻る {
      メッセージ: "ローカルメッセージ",
    };
  },
  作成された() {
    console.log("print about2", this.msg); // ローカルメッセージ
    this.msg = "about2 によって変更されたメッセージ";
    console.log("print about2", this.msg); // about2 によって変更されたメッセージ
    // 最後のページには about2 の変更されたメッセージが表示されています this data this.tipMsg(); // 最後の print-> I は about2 のローカル tipMsg メソッドです this.tipInfo(); // minxin の tipInfo メソッドは未定義です
  },
  メソッド: {
    ヒントメッセージ() {
      console.log("私はabout2のローカルtipMsgメソッドです");
    },
  },
};
</スクリプト>