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 をよろしくお願いいたします。

以下もご興味があるかもしれません: