序文複数レベルのコンポーネントのネストでデータ転送が必要な場合、一般的に使用される方法は vuex を使用することです。しかし、中間処理なしでデータを渡すだけで、処理に vuex を使用するのは、少しやりすぎです。したがって、通常は inheritAttrs と一緒に使用される 2 つの属性、$attrs と $listeners があります。 $属性親コンポーネントからカスタム子コンポーネントに渡されるプロパティは、プロパティ レシーバーがない場合、子コンポーネント内の最も外側のタグに自動的に設定されます。クラスとスタイルの場合は、最も外側のタグのクラスとスタイルがマージされます。 子コンポーネントが親コンポーネントから渡された非プロパティ属性を継承したくない場合は、inheritAttrs を使用して継承を無効にし、v-bind="$attrs" を通じて目的のタグに渡された外部の非プロパティ属性を設定できますが、これによってクラスとスタイルは変更されません。 inheritAttrs 属性の公式ウェブサイト リンク 2.4.0 新機能 タイプ: ブール値 デフォルト値: true 詳細: デフォルトでは、プロパティとして認識されない親スコープの属性バインディングは「フォールバック」され、子コンポーネントのルート要素に通常の HTML 属性として適用されます。ターゲット要素または別のコンポーネントをラップするコンポーネントを作成する場合、これが必ずしも期待どおりの動作になるとは限りません。 inheritAttrs を false に設定すると、このデフォルトの動作は削除されます。これらの属性は、インスタンス プロパティ $attrs (これも 2.4 の新機能) を通じて有効にすることができ、v-bind を通じてルート以外の要素に明示的にバインドできます。 注: このオプションはクラスとスタイルのバインディングには影響しません。 例:親コンポーネント <テンプレート> <私の入力 必須 placeholder="コンテンツを入力してください" タイプ="テキスト" クラス="テーマダーク" /> </テンプレート> <スクリプト> MyInput を './child' からインポートします。 エクスポートデフォルト{ 名前: '親'、 コンポーネント: マイインプット } } </スクリプト> サブコンポーネント <テンプレート> <div> <入力 v-bind="$attrs" クラス="フォームコントロール" /> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'MyInput', 継承属性: false } </スクリプト> 子コンポーネントは親コンポーネントから渡された値を受け入れず、バインドもしませんが、属性v-bind="$attrs"を使用すると、自動的に受け入れてバインドします。 継承属性: false 継承属性: true $listeners (公式説明)listeners: 親スコープ内の v-on イベント リスナーが含まれます (.native 修飾子なし)。これは、v-on="$listeners" を介して内部コンポーネントに渡すことができます。これは、より高レベルのコンポーネントを作成するときに非常に便利です。 まず、コードを見てみましょう。ここでは、フォーカス イベントと入力イベントのみを例として取り上げます。 // 親コンポーネント <テンプレート> <私の入力 必須 プレースホルダー クラス="テーマダーク" @focue="フォーカスオン" @input="入力時" > </my-input> </テンプレート> <スクリプト> MyInput を './child' からインポートします。 エクスポートデフォルト{ コンポーネント: マイインプット }, メソッド: { オンフォーカス(e) { console.log(e.target.value) }, オン入力(e) { console.log(e.target.value) } } } </スクリプト> // サブコンポーネント <テンプレート> <div> <入力 タイプ="テキスト" v-bind="$attrs" クラス="フォームコントロール" @focus="$emit('focus', $event)" @input="$emit('input', $event)" /> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'MyInput', 継承属性: false } </スクリプト> このようにネイティブ イベントをバインドするのは非常に面倒です。すべてのネイティブ イベントをバインドする必要がありますが、v-on="$listeners" を使用すると、多くの手間が省けます。 <入力 タイプ="テキスト" v-bind="$attrs" クラス="フォームコントロール" + v-on="$リスナー" - @focus="$emit('focus', $event)" - @input="$emit('input', $event)" /> この1行のコードで、すべてのネイティブイベントをバインドする問題を解決できます。 使用シナリオコンポーネントが値を渡すときに使用します。祖父は父コンポーネントに値を渡し、父コンポーネントは $attrs を通じて父の props にないすべての属性を取得します。父コンポーネントは孫コンポーネントに $attrs と $listeners をバインドし、孫コンポーネントが祖父から渡された値を取得し、祖父で定義されたメソッドを呼び出すことができるようにします。 一部の UI ライブラリの二次パッケージ化に使用されます。たとえば、element-ui のコンポーネントが独自の使用シナリオを満たせない場合は、二次パッケージ化されますが、独自のプロパティとメソッドを保持する必要があります。この場合、$attrs と $listners は最適なソリューションです。 要約するVue カプセル化コンポーネントの強力なツールである $attrs と $listeners の使用に関するこの記事はこれで終わりです。Vue カプセル化コンポーネントの $attrs と $listeners の使用に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード
>>: ウェブページの再設計の7つの主要要素 ウェブページの再設計の7つの主要要素を共有する
この記事では、VueでEchartsをインポートして線散布図を実現する具体的なコードを参考までに共有...
日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...
以下のように表示されます。 1. ssh -v -p [ポート番号] [ユーザー名]@[IPアドレス...
これは私の最初のブログ投稿です。時間の制約があるため、どのようにフォーマットすればよいかわかりません...
序文ドラッグ アンド ドロップ機能を追加すると、プログラムがより自然でユーザーフレンドリーになります...
この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...
Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...
目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...
1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...
rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...
序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...
質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...
目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...
memcachedをインストールする yum インストール -y memcached #memcac...
Vue でのコードの再利用により、mixnis が提供されます。テンプレートの再利用により、スロット...