Vueミックスインとは何ですか

Vue ミックスインは、Vue コンポーネントで再利用可能な関数を配布するための非常に柔軟な方法です。ミックス オブジェクトには、任意のコンポーネント オプションを含めることができます。コンポーネントがミックス オブジェクトを使用する場合、ミックス オブジェクトのすべてのオプションは、コンポーネントのオプション自体。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

mixins

ミックスインは、Vue コンポーネントで再利用可能な機能を配布するための非常に柔軟な方法です。

混合オブジェクトには、任意のコンポーネント オプションを含めることができます。

コンポーネントがミックスイン オブジェクトを使用すると、ミックスイン オブジェクトのすべてのオプションがコンポーネント自体のオプションに混合されます。

ミックスインの理解

コンポーネントが参照された後、親コンポーネント内に別のスペースを開き、値に基づいて対応する操作を実行するのと同じです。本質的に、この 2 つは依然として別個であり、比較的独立しています。

コンポーネントが導入された後、ミックスインは、データやその他のメソッド、メソッド、その他の属性などのコンポーネントの内部コンテンツを、親コンポーネントの対応するコンテンツとマージします。導入後、親コンポーネントの各種プロパティメソッドが拡張されたことに相当します。

単純なコンポーネント リファレンス:

親コンポーネントのサブコンポーネント>>>親コンポーネントのサブコンポーネント

mixins:

親コンポーネントのサブコンポーネント> ; >> 新しい親コンポーネント

# は、複数のコンポーネントまたは複数の Vue オブジェクト インスタンスにバインドして使用できる vue のパブリック メソッドの登録に似ています。もう 1 つの点は、プロトタイプ オブジェクトにメソッドを登録するのと似ています。インスタンス オブジェクト、つまりコンポーネントまたは Vue インスタンス オブジェクトでは、同じ関数名を持つメソッドを定義してオーバーライドすることができます。サブクラスと親クラス。

ミックスインの使用

メソッドの再利用

html

<div id="app">
    <child></child>
    <kid></kid>
</div>

js

Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Child foo()&#39;+this.msg++)
        }
    }
})
 
Vue.component(&#39;kid&#39;,{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Kid foo()&#39;+this.msg++)
        }
    }
})

の助けを借りてmixins 以前は、2 つの異なるコンポーネントで foo メソッドを呼び出すには繰り返し定義が必要でした。メソッドが複雑な場合、コードはさらに冗長になります。ミックスインを使用すると、非常に簡単になります:

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('hello from mixin!----'+this.msg++)
        }
    }
}
var child=Vue.component('child',{ 
        template:`<h1 @click="foo">child component</h1>`, 
        mixins:[mixin]
})
Vue.component(&#39;kid&#39;,{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

ここでは、2 つのコンポーネントは this.msg を通じてミックスインで定義された msg を参照できますが、エディターがそれを試してみたところ、参照された 2 つのコンポーネントは次のとおりです。同じではありません。同じメッセージではありませんが、それぞれが新しいメッセージを作成しました。同じデータがコンポーネント内で定義されている場合、ミックスイン内のメッセージではなく、コンポーネント内のメッセージがここで参照されます。

以上がVueミックスインとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。