Vueにおける混合継承の詳細な説明

混合継承の影響:

Aにはデータ属性とsayメソッドがある

Bにはseeメソッドとname属性がある

AがBを継承すると、Aは自身のデータ属性とsayメソッドに加えて、Bのseeメソッドとname属性も持つようになる。

C に AB を混合すると、C には独自の要素と、A のデータ属性と say メソッド、および B の see メソッドと name 属性が含まれるようになります。

1. 継承

Vue.extend メソッド

Vue.extend( Vue ComponentOptions ) は、基本 Vue コンストラクターを使用して「サブクラス」を作成するグローバルメソッドです。引数は、コンポーネントオプション (Vue ComponentOptions) を含むオブジェクトです。

データ属性は特別なケースであり、注意が必要です。Vue.extend() の関数（ファクトリ関数）である必要があります。

// コンストラクタを作成する ja
var プロファイル = Vue.extend({
  テンプレート: '<p>{{firstName}} {{lastName}} 別名 {{alias}}</p>',
  データ: 関数 () {
    戻る {
      ファーストネーム: 'ウォルター',
      姓: 'ホワイト',
      別名:「ハイゼンベルク」
    }
  }
})
// Profile クラスのインスタンスを作成し、要素に添付します。
新しいプロファイル().$mount('#mount-point')

プロパティを拡張する

extends を使用すると、Vue.extend を使用せずに別のコンポーネントの拡張機能 (単純なオプションオブジェクトまたはコンストラクター) を宣言できます。これは主に、単一ファイルコンポーネントの拡張を容易にするためです。タイプはオブジェクトまたは関数です

pageTwo.vue ファイル

<テンプレート>
    <div>
        <h3>2 ページ目</h3>
        <ページング :total="合計" :pageSize="ページサイズ" :sizeOptions="サイズオプション"/>
    </div>
</テンプレート>
<スクリプト>
    '../component/PagingData.vue' から PagingData をインポートします。
    エクスポートデフォルト{
        // 継承を実装する extends: PagingData
    }
</スクリプト>

注: 上記のファイルの paging は、グローバルに登録されたカスタムコンポーネントです。PagingData もコンポーネントですが、登録されていません。代わりに、そのコンテンツは継承を通じて pageTwo にマージされます。

2. ミックスイン

ミックスインオブジェクトには任意のコンポーネントオプションを含めることができます。コンポーネントがミックスインを使用する場合、ミックスインのすべてのオプションがコンポーネント自体のオプションに「混合」されます。

マージルール

コンポーネントとミックスインに同じ名前のオプションがある場合、それらのオプションは適切な方法で「マージ」されます。

1. データオブジェクトは内部で再帰的にマージされ、競合が発生した場合はコンポーネントデータが優先されます。

2. 同じ名前のフック関数（ライフサイクル関数）は配列にマージされ、すべて呼び出されます。さらに、ミックスインのフックはコンポーネント自体のフックの前に呼び出されます。

3. メソッド、コンポーネント、ディレクティブなど、値がオブジェクトであるオプションは、同じオブジェクトにマージされます。 2 つのオブジェクトのキー名が競合する場合は、コンポーネントオブジェクトのキーと値のペアが取得されます。

継承（拡張）もこのマージのルールです。

ミックスインを使用して多重継承を実装できます。ミックスインは継承の実装には使用されません。複数の Vue ComponentOptions (Vue オプションコンポーネントオブジェクト) を結合します。

形式: ミックスイン: [コンポーネント 1 をマージ、コンポーネント 2 をマージ、…]

pageOne.vue ファイル

<テンプレート>
    <div>
        <h3>1ページ目</h3>
        <hr/>
        <ページング @pageChangeEvt="cb" :total="合計" :pageSize="ページサイズ" :sizeOptions="sizeOptions"/>
    </div>
</テンプレート>
<スクリプト>
    '../component/PagingData.vue' から PagingData をインポートします。
    '../component/PagingFunc' から PagingFunc をインポートします。
    エクスポートデフォルト{
        // 拡張: {PagingFunc、PagingData}、
        // 拡張: [PagingFunc、PagingData]、
        ミックスイン: [PagingFunc、PagingData]、
    }
</スクリプト>

注: 上記のファイルの paging は、グローバルに登録されたカスタムコンポーネントです。PagingData と PagingFunc もコンポーネントですが、登録されていません。代わりに、それらのコンテンツはミキシングによって pageOne にマージされます。