序文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 のインストールと使用方法の分析
<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...
1. 位置情報の利用状況の概要ロケーションは、さまざまな処理方法に対してさまざまな種類のリクエストを...
この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコ...
1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...
重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...
MySQLデーモンの起動に失敗したエラーの解決方法数日前、公開されたウェブサイトはこれらのアクティビ...
目次1. React.Children.map 2. React.Children.forEach ...
目次序文始める基本レイアウトデータバインディングイベントバインディング最適化ジッター問題を最適化する...
Object.definePropertyの理解文法:オブジェクト.defineProperty(o...
目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...
Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...
目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...
データベース アプリケーションは、アプリケーション システムに不可欠な部分です。リレーショナル デー...
cpanel 管理バックエンドを開き、「詳細」オプションの下に「Clock Guardian Job...
1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...