序文Vue にはコードの再利用に使われる mixins という設定項目があります。同時に、このミックスインはローカルミックスインとグローバルミックスインに分けられます。 vue での説明は以下のとおりです。言語がつまらないと思われる場合は読み飛ばしていただいて構いません。 Mixin: Vue コンポーネントで再利用可能な機能を配布する非常に柔軟な方法です。 Mixin オブジェクトには任意のコンポーネント オプションを含めることができます。コンポーネントがミックスイン オブジェクトを使用すると、ミックスイン オブジェクトのすべてのオプションがコンポーネント独自のオプションに混合されます。アプリケーションシナリオ まず、ミックスインのアプリケーション シナリオについて説明します。現在 2 つのコンポーネントがあるとします。これらの 2 つのコンポーネントがクリックされると、どちらもデータ内の name 属性の値を console.log に記録する必要があります。 最初のコンポーネントは、以下に示すように、学校のコンポーネントです。 2番目の要素は学生要素である 2 つの異なるコンポーネントに同じ機能を持つメソッドがあることがわかります。この書き方では、2 つのコンポーネントに同じコードを記述することになります。2 つのコンポーネントであれば問題ありませんが、そのような機能を必要とするコンポーネントが 200 個あると煩わしくなります。このような場合、ミックスインを使用してコードを再利用できます。 使い方1. ミックスインファイルを作成し、対応するデータを公開する 公開されているので、もちろんコンポーネントとして他の人が使用できるようにする必要があります 2. まず、ローカル ミックスインについて説明します。ローカル ミックスインとは、VueComponet を 1 つずつミックスインすることを意味します。グローバル ミックスインは、もちろん、Vue (Vm) オブジェクトにミックスインします。 ローカルミックスインの書き方はこちら 同様に、学生のコンポーネントについても同じことを行います。 完了後、クリックすると、関数は同じように完了します。showNameメソッドは、ミックスインを通じてミックスインしたもので、一度だけ記述しました。 上記はローカルミックスインであり、すべてのVueComponetにミックスする必要があります。 3. グローバル ミックスインについてお話しします。これを Vue オブジェクトにミックスします。こうすることで、Vue 配下のすべてのコンポーネントにこのメソッドが備わり、コンポーネントごとに記述する必要がなくなります。この記述方法は、すべてのコンポーネントにこのメソッドまたは属性が必要であると判断された場合に使用します。通常は、この方法では使用しません。 方法は次のとおりです main.js ファイルにインポートする 上記はグローバルミキシングですが、すべてのコンポーネント、すべてのコンポーネント、すべてのコンポーネントが混合されるため、一般的にはあまり使用されません。 そのような需要はめったにない 最後に、ミックスインされたメソッド、プロパティ、フック関数がすでにローカルに存在し、競合が発生した場合に何が起こるかについて説明します。このコンポーネントに、ミックスインされたメソッドやプロパティと同じ名前のメソッド、プロパティ、フック関数がある場合、このコンポーネントのメソッドやプロパティが優先され、ミックスインされたメソッドやプロパティは無効になります。 ただし、ライフサイクル フック機能は、このコンポーネント内にあるか、ミックスインされているかに関係なく有効になり、最初にミックスインされたライフサイクル フックが実行され、その後、このコンポーネントのライフサイクル フックが実行されます。 要約するVue での mixin の使い方に関する記事はこれで終わりです。Vue での mixin の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLでユーザーを作成し、ユーザーに権限を付与する方法の詳細なチュートリアル
>>: Docker 用ビジュアル UI 管理ツール Portainer のインストールと使用方法の分析
1. jsonオブジェクトをjson文字列に変換し、文字列が「{}」であるかどうかを判断します。 v...
最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...
絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...
目次01 背景02 はじめに03 ワークフロー04 いくつかの質問05 ファイルをバックアップする0...
前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...
1. まずMySqlの公式サイトからダウンロードします参考: https://www.jb51.ne...
序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...
目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...
最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...
参考までに、win7システム上のVMware仮想マシンにlinux7.2インターネットアクセス構成を...
この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...
目次1. Vue環境を構築する2. Vue スキャフォールディングツール3. プロジェクトを作成する...