ホームページ > ウェブフロントエンド > Vue.js > vue の $attrs 属性と $listeners 属性を理解し、その使用法について説明します。

vue の $attrs 属性と $listeners 属性を理解し、その使用法について説明します。

青灯夜游
リリース: 2022-03-02 10:07:56
転載
3514 人が閲覧しました

この記事では、コンポーネントをカプセル化するための vue の強力なツールである $attrs 属性と $listeners 属性について説明し、それらがどのように使用されるかを見ていきます。

vue の $attrs 属性と $listeners 属性を理解し、その使用法について説明します。

マルチレベルのコンポーネントのネストでデータを渡す必要がある場合、通常使用される方法は vuex を使用することです。しかし、処理に vuex を使用して、中間処理を行わずにデータを渡すだけではやりすぎです。したがって、$attrs$listeners という 2 つの属性があり、これらは通常、inheritAttrs と一緒に使用されます。 [関連する推奨事項: vuejs ビデオ チュートリアル ]

$attrs

  • 親コンポーネントからカスタム子コンポーネントに渡される属性 ( がない場合) prop 受付はサブコンポーネント内の最も外側のタグに自動的に設定されます。classstyle の場合、最も外側のタグの class が設定されます。と style をマージします。
  • 子コンポーネントが、親コンポーネントによって渡された非 prop 属性を継承したくない場合は、inheritAttrs を使用して継承を無効にしてから、 v-bind="$ attrs" は、外部から渡される非 prop 属性を目的のタグに設定しますが、class と ## は変更されません。 #スタイル###。

inheritAttrs 属性

2.4.0

公式 Web サイトのリンクを追加 https://cn .vuejs.org/v2/api/#inheritAttrs

    #Type
  • :

    boolean

  • デフォルト値
  • :

    true

  • 詳細
  • :

    デフォルトの親ロールの属性バインディング小道具として認識されないフィールドは「フォールバック」し、通常の HTML 属性として子コンポーネントのルート要素に適用されます。ターゲット要素または別のコンポーネントをラップするコンポーネントを作成する場合、予期される動作に必ずしも準拠するとは限りません。 inheritAttrs

    false に設定すると、これらのデフォルトの動作は削除されます。これらの属性は、インスタンス プロパティ $attrs (これも 2.4 の新機能) を通じて有効にすることができ、v-bind を通じて非ルート要素に明示的にバインドできます。 注: このオプション は、

    class および style バインディングには影響しません。

例:

親コンポーネント

<template>
  <my-input
      required
      placeholder="请输入内容"
      type="text"
      class="theme-dark"
  />
</template>

<script>
import MyInput from &#39;./child&#39;
export default {
  name: &#39;parent&#39;,
  components: {
    MyInput
  }
}
</script>
ログイン後にコピー

子コンポーネント

<template>
  <div>
    <input
        v-bind="$attrs"
        class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>
ログイン後にコピー

子コンポーネントは親コンポーネントから渡された値を受け入れず、バインドもしませんが、属性

v-bind="$attrs"

を使用すると、自動的に受け入れてバインドします

inheritAttrs: false

inheritAttrs: truevue の $attrs 属性と $listeners 属性を理解し、その使用法について説明します。

##listeners (公式サイトの説明)vue の $attrs 属性と $listeners 属性を理解し、その使用法について説明します。

listeners

: 親スコープに
    v-on
  • イベント リスナーが含まれます (.native 修飾子を除く)。 v-on="$listeners" を介して内部コンポーネントに渡すことができます。これは、より高いレベルのコンポーネントを作成するときに非常に役立ちます。 コードから始めましょう。ここでは、focue
input

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 父组件 &lt;template&gt; &lt;my-input required placeholder class=&quot;theme-dark&quot; @focue=&quot;onFocus&quot; @input=&quot;onInput&quot; &gt; &lt;/my-input&gt; &lt;/template&gt; &lt;script&gt; import MyInput from &amp;#39;./child&amp;#39; export default { components: { MyInput }, methods: { onFocus (e) { console.log(e.target.value) }, onInput (e) { console.log(e.target.value) } } } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 子组件 &lt;template&gt; &lt;div&gt; &lt;input type=&quot;text&quot; v-bind=&quot;$attrs&quot; class=&quot;form-control&quot; @focus=&quot;$emit(&amp;#39;focus&amp;#39;, $event)&quot; @input=&quot;$emit(&amp;#39;input&amp;#39;, $event)&quot; /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: &amp;#39;MyInput&amp;#39;, inheritAttrs: false } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> の 2 つの例を示します。ネイティブ イベントをバインドするのは非常に面倒です。すべてのネイティブ イベントをバインドする必要がありますが、v-on="$listeners" を使用すると、多くの手間が省けます

 <input
        type="text"
        v-bind="$attrs"
        class="form-control"
+       v-on="$listeners"
-       @focus="$emit(&#39;focus&#39;, $event)"
-       @input="$emit(&#39;input&#39;, $event)"
    />
ログイン後にコピー

このように、1 行のコードで解決できますすべてのネイティブ イベントをバインドする問題 [関連する推奨事項: "

vuejs チュートリアル

"、"

web フロントエンド

"]

以上がvue の $attrs 属性と $listeners 属性を理解し、その使用法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート