ホームページ > 記事 > ウェブフロントエンド > vue の mixin の詳細な解釈
Vue は、コンポーネント コンテンツのより効率的な再利用を実現するために、混合メカニズム (ミックスイン) を提供します。 Vue のミックスインについての私の理解をお話しします。必要な方は参考にしてください。Vue には、コンポーネント コンテンツをより効率的に再利用するために使用される混合メカニズム、ミックスインが用意されています。最初は、これとコンポーネントに違いはないと思いました。 。後でそれは間違いだと分かりました。通常の状況におけるミックスインとインポートされたコンポーネントの違いを見てみましょう。
コンポーネントが参照された後、親コンポーネントの props からの値に基づいて対応する操作を実行するために、親コンポーネント内に別のスペースを開くことと同等ですが、本質的には、この 2 つは依然として別個であり、比較的独立しています。 。
そして、ミックスインは、コンポーネントを導入した後、データやその他のメソッド、メソッドやその他の属性などのコンポーネントの内部コンテンツを、親コンポーネントの対応するコンテンツとマージします。導入後、親コンポーネントの各種属性メソッドが拡張されたことに相当します。
単純なコンポーネントリファレンス:親コンポーネント + 子コンポーネント>>> 親コンポーネント + 子コンポーネント
ミックスイン:
親コンポーネント + 子コンポーネント>> ;> 新しい親コンポーネント
ミックスインを使用する場合、親コンポーネントと子コンポーネントの両方が子コンポーネントにさまざまな属性メソッドを持っていることに注意してください。ただし、これは、マージ以外に、これらの変数を同時に共有して処理することを意味するものではありません。開催されます。初めて mixin を見たとき、私は素朴にも vuex に似た下向きのデータ共有ソリューションだと思ったようで、とても興奮しました。
Vue のミックスインについてご紹介します
1. ミックスイン ファイルとは、vue コンポーネントの任意のコンポーネントを含めることができるオブジェクトです。これは、Vue コンポーネントの再利用可能な関数を配布するための非常に柔軟な方法です。ミックスインがコンポーネントによって使用されると、minxin 内のすべてのプロパティ/メソッドがコンポーネント内のプロパティ/メソッドと混合されます。 2 番目、ミックスインの使用
Vue コンポーネントにはミックスイン属性を持つことができ、この属性の値の型は配列です。 mixin 配列の要素 mixins として mixin を導入します。 [mixin]コンポーネント A は mixin を適用し、メソッド、コンポーネント、ディレクティブなどの 2 つの属性が同じオブジェクトに混合されます。ディレクティブに同じ名前属性がある場合、ミックスイン内のディレクティブは無視されます。同じ名前のフック関数は配列にまとめられてすべて呼び出され、ミックスインのフック関数はコンポーネントのフック関数より前に呼び出されます。 上記は私があなたのためにまとめたものです。
関連記事:
vue で関数 render をレンダリングする方法 (詳細なチュートリアル) JS Hill ソート アルゴリズムについて (詳細なチュートリアル) jade テンプレート エンジンの使用方法の詳細 使い方カスタマイズ PC WeChatスキャンコードログインの定義JavaScriptを使用してQQスペースのフォトアルバム表示を実装する方法jsイベントのループ機構について(詳細なチュートリアル)JSソートアルゴリズムの概要について Angular4での実装方法 フォームレスポンス vue webpack require.ensureでコンポーネントをロードする方法 vueコンポーネントでiframe要素を使用する方法 vueを使用してナビゲーションバーを実装する方法 Web 高速スクロールアップを実装する方法Angular2 で ts ファイルのブレークポイント デバッグを実装する方法 vue-router でルートの遅延読み込みを実装する方法 Angularjs フィルターを使用して動的検索を実装する方法vue-cliアプリケーションを通じてvueを構築する方法以上がvue の mixin の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。