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

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

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

$attrs

• 親コンポーネントからカスタム子コンポーネントに渡される属性 ( がない場合) prop 受付はサブコンポーネント内の最も外側のタグに自動的に設定されます。class と style の場合、最も外側のタグの 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: true

##listeners (公式サイトの説明)

listeners

: 親スコープに

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

input

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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:php;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 サイトの他の関連記事を参照してください。