Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

背景

ここで、状況について説明しましょう。親コンポーネントは孫コンポーネントとどのように通信するのでしょうか。解決策はいくつあるでしょうか。

データ管理には VueX を使用しますが、プロジェクト内の複数のコンポーネント間で共有される状態が少なく、プロジェクトが小さく、グローバル状態が少ない場合は、VueX を使用してこの機能を実装しても、 VueXのパワーが発揮されません。
B を中継ステーションとして使用します。コンポーネント A がコンポーネント C に情報を渡す必要がある場合、B はコンポーネント A から情報を受け取り、プロパティを使用してコンポーネント C に渡します。これは解決策ですが、ネストされたコンポーネントが多すぎると、コードが煩雑になり、保守が困難になります。Cの状態変化を A に渡す必要がある場合は、イベントシステムを使用してレベルごとに渡します。
Vue 中央データバスをカスタマイズします。これは、レベル間でメッセージを渡すコンポーネントに適しています。ただし、複数の人が共同作業する場合、コードの保守性と可読性が低下するという欠点があります。

1. 文書の説明

(1) $props : 現在のコンポーネントが受け取ったpropsオブジェクト。 Vue インスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。

（2） $attrs ：親スコープでプロパティとして認識（および取得）されない属性バインディング（クラスとスタイルを除く）が含まれます。

(3) $listeners : 親スコープ内のv-onイベントリスナーが含まれます（.native修飾子なし）。 v-on="listeners" を通じて内部コンポーネントに渡すことができます。

2. 特定の用途

1. 親コンポーネント

<テンプレート>
  <div>
    <div>親コンポーネント</div>
    <子供
      :foo="foo"
      :zoo="動物園"
      @handle="handleFun"
    >
    </子>
  </div>
</テンプレート>

<スクリプト>
'./Child.vue' から Child をインポートします。
エクスポートデフォルト{
  コンポーネント: { 子 },
  データ（） {
    戻る {
      foo: 'foo',
      動物園: 「動物園」
    }
  },
  メソッド: {
    // イベントを渡す handleFun(value) {
      this.zoo = 値
      console.log('孫コンポーネントでクリックイベントが発生したので受信しました')
    }
  }
}
</スクリプト>

2. 子コンポーネント（Child.vue）

中間層は、親コンポーネントと孫コンポーネント間の伝送仲介者として、孫コンポーネントがデータを受信できるように、息子コンポーネント内の孫コンポーネントにv-bind="$attrs"を追加します。

$attrsは、zooなどの親コンポーネントから渡されるデータで、子コンポーネントはpropsを通じて受け取らない。

 <テンプレート>
  <div クラス = '子ビュー'>
    <p>子コンポーネント - {{$props.foo}} は {{foo} と同じ内容を持ちます。}</p>
    <GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild>
  </div>
</テンプレート>

<スクリプト>
'./GrandChild.vue' から GrandChild をインポートします。
エクスポートデフォルト{
  // 親コンポーネントのコンテンツをすべて継承します。inheritAttrs: true,
  コンポーネント: { GrandChild },
  プロパティ: ['foo'],
  データ（） {
    戻る {
    }
  }
}
</スクリプト>

3. 孫コンポーネント (GrandChild.vue)

孫コンポーネントでは、親コンポーネントから渡されたデータを受け取るためにpropsを使用する必要があります。

 <テンプレート>
  <div class='孫のビュー'>
    <p>孫コンポーネント</p>
    <p>孫コンポーネントに渡されたデータ: {{zoo}}</p>
    <button @click="testFun">クリックしてイベントをトリガーします</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  // 親コンポーネントのコンテンツをすべて継承せず、コンポーネントのルート要素 DOM に属性を表示しません。inheritAttrs: false,
  // このコンポーネントでは、親コンポーネントから渡されたデータを受け取る必要があります。props のパラメータ名は変更できないことに注意してください。親コンポーネントから渡された props と同じである必要があります: ['zoo'],
  メソッド: {
    テストファン（）{
      this.$emit('handle', '123')
    }
  }
}
</スクリプト>

結論

上記のコードから、 attrs 属性とinheritAttrs属性を使用すると、簡潔なコードを使用してコンポーネント Aのデータをコンポーネント Cに渡すことができることがわかります。このシナリオの使用範囲は非常に広範囲です。

listenersを通じて、コンポーネント b に v-on="$listeners" をバインドし、コンポーネント a で、コンポーネント c によってトリガーされたイベントをリッスンします。コンポーネント c によって送信されたデータはコンポーネント a に渡すことができます。

Vue における $props、$attrs、$listeners の詳細な使用法に関するこの記事はこれで終わりです。Vue の $props、$attrs、$listeners に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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