Vue で $attrs と $listeners を使用するチュートリアル

導入

$属性

すべての親コンポーネントのプロパティを継承します (props を通じて受け取られないプロパティには、クラス名とスタイルが含まれます)。

継承属性:

非 props 属性がタグの最外層に表示されるかどうか。デフォルト値は true です。これは、すべての親コンポーネント属性 (props 固有のバインディングを除く) が通常の HTML 機能として継承され、子コンポーネントのルート要素に適用されることを意味します。コンポーネントのルート要素に機能を継承させたくない場合は、inheritAttrs: false を設定しますが、クラスは継承されます。

$リスナー

これは、すべてのメソッド バインディングを受け取ることができるオブジェクトであり、このコンポーネントで動作するすべてのリスナーが含まれています。v-on="$listeners" の場合、すべてのイベント リスナーはこのコンポーネントの特定の子要素に送られます。

例

親コンポーネント内

<テンプレート>
  <div id="アプリ">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</テンプレート>
 
<スクリプト>
「./components/son.vue」からSonをインポートします。
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント:
    息子、
  },
};
</スクリプト>
 
<スタイル></スタイル>

サブコンポーネント内

<テンプレート>
  <div id="アプリ">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</テンプレート>
 
<スクリプト>
「./components/son.vue」からSonをインポートします。
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント:
    息子、
  },
};
</スクリプト>
 
<スタイル></スタイル>

inheritAttrsがデフォルトでfalseの場合、属性は最も外側のサブコンポーネントに渡されることがわかります。

inheritAttrsがtrueの場合

属性を受け取るためにpropsを使用する場合、属性は表示されません。

概要: コンポーネント タグで渡された属性がサブコンポーネントによって受信されない場合、それらの属性はサブコンポーネント タグの最外層まで実行されます。

非props属性は$attrs {属性名: 属性値}を通じて受け取ることができます。

<テンプレート>
  <div>
    <img v-bind="$attrs" alt="" />
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  継承属性: false、
};
</スクリプト>
<スタイルスコープ>
.img {
  幅: 100ピクセル;
  高さ: 100px;
}
</スタイル>

クリック イベントを子コンポーネントにバインドすると、クリック イベントはトリガーされません。.native 修飾子を使用すると、正常にバインドできます。

または、$listeners を使用してすべてのメソッドをバインドします。

サブコンポーネント内

結果

要約する

すべての非props属性は$attrsを通じて受け取ることができます

v-bind="$attrs" を使用すると、props以外の属性を対応するタグにバインドできます。コンポーネントにも使用できます。

コンポーネント上のすべてのメソッドバインディングサブコンポーネントは、$listenersを通じて受信できます。

使用法: v-on="$listeners" を使用して、すべてのメソッドをコンポーネントの対応するタグにバインドします。これはコンポーネントにも使用できます。

これで、Vue で $attrs と $listeners を使用する方法に関するチュートリアルは終了です。Vue $attrs $listeners の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。