Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

序文

複数レベルのコンポーネントのネストでデータ転送が必要な場合、一般的に使用される方法は 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue2.xの$attrsと$listenersについて簡単に説明します。
  • vue $attrs と $listeners の使い方と違い
  • Vue で $props、$attrs、$listeners を使用する方法の詳細な説明
  • Vue で $attrs と $listeners を使用するチュートリアル
  • Vue $attrs と inheritAttr を使用してボタンを無効にした効果を実現する
  • Vue コンポーネント通信における $attrs と $listeners の実装原則の分析
  • vue $attrs の使用に関する包括的な分析

<<:  CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード

>>:  ウェブページの再設計の7つの主要要素 ウェブページの再設計の7つの主要要素を共有する

推薦する

Vue は Echarts をインポートして折れ線グラフを実現します

この記事では、VueでEchartsをインポートして線散布図を実現する具体的なコードを参考までに共有...

SQLでEXPLAINコマンドを使用する方法

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

Linux でローカル コンピューターとリモート サーバーのポートが接続されているかどうかを確認する方法

以下のように表示されます。 1. ssh -v -p [ポート番号] [ユーザー名]@[IPアドレス...

VMWare14.0.0のUbuntu仮想マシンで共有フォルダを設定する

これは私の最初のブログ投稿です。時間の制約があるため、どのようにフォーマットすればよいかわかりません...

vue.js を使用してドラッグ アンド ドロップ機能を実装する方法

序文ドラッグ アンド ドロップ機能を追加すると、プログラムがより自然でユーザーフレンドリーになります...

mysql8 共通テーブル式 CTE 使用例の分析

この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...

10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ

Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...

Vue v-for ループを書く 7 つの方法

目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...

Centos7のFirewalldファイアウォールの基本コマンドの詳細な説明

1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...

Linux で MySQL データベースのデータ ファイル パスを変更する手順

rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...

MySQL の結合インデックスと左端一致原則の詳細な説明

序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...

CSS3はシームレスなスクロールと手ぶれ防止を実現します

質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...

1 つの記事で JSON (JavaScript Object Notation) を理解する

目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...

NginxとLuaによるグレースケールリリースの実装

memcachedをインストールする yum インストール -y memcached #memcac...

Vueのスロットの詳細な説明

Vue でのコードの再利用により、mixnis が提供されます。テンプレートの再利用により、スロット...