VUE混合（ミックスイン）を使用し

混合（ミックスイン）はVueのアセンブリの再利用可能な機能を配布するための非常に柔軟な方法を提供します。混合したオブジェクトは、任意のコンポーネントのオプションを含むことができます。成分が混合オブジェクトを使用する場合、すべてのオブジェクトは、アセンブリ自体を入力するオプション「ハイブリッド」オプションと混合されます。

使用例：

要件：

I demoA demoBコンポーネントアセンブリを仮定し、同じ方法のいくつかを有し、処理ロジック。ケースは、使用ミックスインを混合することができるように、この時間のために我々は、重複したコードを記述しないでください。

デモディレクトリ：

輸出によるオブジェクトと輸出ミックスの定義におけるmixins.jsで：

// 本明細書に組み込まれ、ターゲットの定義:(部分的混合、参照グローバル公式サイトを混合：HTTPS：//cn.vuejs.org/v2/guide/mixins.html）
// 直接参照を使用して混合し、特定のオブジェクトとコンポーネント： https://cn.vuejs.org/v2/guide/mixins.html 
// 彼らはすべて持っている二つの成分のdemoA.vueとdemeB.vue混合後、ハロー方法、および自動実行が作成された 
エクスポートVARを = myMixin {
     // コンポーネントの他の特性は、ここで記述することができる
    方法：{ 
        こんにちは：関数（MSG = '' ）{ 
            にconsole.log（ 'ハローミックスイン'から+！; MSG）
        } 
    }、
    作成：関数（） {
         この.hello（）;
         // フック関数と同じ名前の配列を組み合わせ、したがって呼び出されます。また、混合したオブジェクトフックは、コンポーネント自体フックの前に呼び出されます。
        console.log（ '混合オブジェクトが-created' ）; 
    } 
};

使用mininx demoAコンポーネントアセンブリとdemoBで混合しました。

demoA.vue

<テンプレート> 
    <DIV CLASS = "demoA"> 
        demoA
     </ div> 
</テンプレート> 

<スクリプト> 
    からインポートmyMixin {}」./mixins/mixins' ; 
    エクスポートデフォルト{ 
        名： 'demoA' 、
        ミックスインとして：[myMixin] 、   // かなり混在オブジェクトのプロパティがで現在のコンポーネントで書かれていると混合しました。
        データ（）{
             リターン{ 

            } 
        }、
        メソッド：{ 
            バー：関数（）{ 
                にconsole.log（ 'バーdemoA-方法' ）; 
            } 
        }、
             .BAR（）; 
        }、
        マウント（）{ 
            にconsole.logは（ 'demoAマウント' ）;
             // this.hello（demoA）; //主題の方法を混合する方法を呼び出す-から>ハローdemoAミックスイン！
        } 

    };
 </ SCRIPT> 

<スタイルはスコープ> 

</スタイル>

demoB.vue

<テンプレート> 
    <DIV CLASS = "demoB"> 
        demoB
     </ div> 
</テンプレート> 

<スクリプト> 
    からインポートmyMixin {}」./mixins/mixins' ; 
    エクスポートデフォルト{ 
        名： 'demoB' 、
        ミックスインとして：[myMixin] 、// かなり混在オブジェクトのプロパティがで現在のコンポーネントで書かれていると混合しました。
        データ（）{
             リターン{ 
                FOO： 'FOO' 
            } 
        }、
        メソッド：{ 

        }、
        作成（）{ 
            にconsole.log（ 'demoB-作成' ）
        }、
            console.log（ 'demoBマウント' ）;
             // this.hello（ 'demoB'）;オブジェクトのメソッドは、ミキシングのメソッドを呼び出す// - >こんにちはミックスインdemoBから！
        } 

    };
 </ SCRIPT>は

<スタイルは、スコープ> 

</スタイル>

シンプルな業績：

具体的な使用：公式サイトのAPIを参照してください。https://cn.vuejs.org/v2/guide/mixins.html

参考記事：https://www.jianshu.com/p/1bfd582da93e

VUE混合（ミックスイン）を使用し

おすすめ