Vue フロントエンド開発における階層的にネストされたコンポーネント間の通信の詳細な説明

序文

Vue の親子コンポーネントは、props を通じて親コンポーネントの値を子コンポーネントに簡単に渡すことができます。コンポーネントが多くのレイヤーにネストされている場合、各レイヤーは同じ props を使用して値を渡す必要があり、これは面倒でメンテナンスが困難です。

例

[例] コンポーネント A はコンポーネント B を使用し、コンポーネント B はコンポーネント C を使用します。コンポーネント C は、コンポーネント A のデータテキストとコンポーネント A のメソッド getmethod を使用する必要があります。コンポーネント A のコードは次のとおりです。

<テンプレート>
  <div>
    <P>これはコンポーネント A です</P>
    <v-コーム></v-コーム>
  </div>
</テンプレート>
<スクリプト>
  '@/view/comB.vue' から comB をインポートします。
  エクスポートデフォルト{
    名前: 'comA',
    コンポーネント:
      'v-comb': comB
    },
    データ（） {
      戻る {
        メッセージ: '私はコンポーネント A のデータです'
      }
    },
    provide: function() { //子コンポーネントにプロパティとメソッドを挿入する return {
        テキスト: this.msg、
        getメソッド: 関数() {
          console.log('ルートコンポーネントでgetMethodメソッドを実行します')
        }
      }
    }
  }
</スクリプト>

キーワードprovideを使用して、子コンポーネントにデータとメソッドを公開します。
コンポーネントBはコンポーネントAの子コンポーネントであり、コンポーネントCの親コンポーネントです。コードは次のようになります。

<テンプレート>
  <div>
    <div>
      <P>これはコンポーネント B です</P>
      <v-comc></v-comc>
    </div>
  </div>
</テンプレート>
<スクリプト>
  '@/view/comC.vue' から comC をインポートします。
  エクスポートデフォルト{
    名前: 'comB',
    コンポーネント:
      'v-comc': comC
    }
  }
</スクリプト>

コンポーネント C はコンポーネント A の孫です。コンポーネント C はコンポーネント A のデータとメソッドを使用する必要があります。コードは次のとおりです。

<テンプレート>
  <div style="border:1px solid orange;color:orange;">
    <div>
      <P>これは C コンポーネントです</P>
      <div>{{テキスト}}</div>
      <button @click="getMethod">親コンポーネントメソッドを呼び出す</button>
    </div>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前: 'comC',
    inject: ['text', 'getMethod'] //text と getMethod はプロバイダーによって提供される名前です}
</スクリプト>

ここで、inject キーワードは、コンポーネント A によって公開される情報を受け取るために使用されます。inject: [] で受け取る名前は、provide によって提供される名前とまったく同じである必要があることに特に注意してください。

実行すると、インターフェースは以下のようになります。

ここに画像の説明を挿入

まとめ

複数レベルのネストされたコンポーネント通信の場合、Vue は provide および inject キーワードを使用して親コンポーネントから子コンポーネントに値を直接転送するため、非常に便利です。問題のあるサブコンポーネントと親コンポーネントの間には強い結合関係があるため、絶対に必要な場合を除き、使用することはお勧めしません。

上記は、Vue フロントエンド開発における階層的にネストされたコンポーネントの通信の詳細な説明の詳細な内容です。Vue における階層的にネストされたコンポーネントの通信の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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