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

<テンプレート>
  <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メソッドを実行します')
        }
      }
    }
  }
</スクリプト>

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

<テンプレート>
  <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 はプロバイダーによって提供される名前です}
</スクリプト>