Vue3 における非親子コンポーネントの値転送の詳細な説明

vue2 における非親子コンポーネントの値の伝達は、主にイベント バスを介して行われ、vue インスタンスを作成し、そのインスタンスを異なるコンポーネントにインポートすることで、非親子コンポーネント間の通信動作を実装します。
Vue3 は **provide** プロパティと **inject** プロパティを提供しており、親子関係のないコンポーネント間の通信を実現できます。
App.vue (親)、sub1 (子)、sub2 (子の子) の 3 つのコンポーネントがあるとします。

<テンプレート>
  <div style="border: 1px solid pink">
    <h1>私はあなたの父親です</h1>
    👇
    <sub1/>
  </div>
</テンプレート>
<スクリプト>
  './sub1' から sub1 をインポートします
	エクスポートデフォルト{
		名前:「アプリ」、
    コンポーネント:{
			サブ1、
    },
    provide:{ // 親コンポーネントで provide を定義して、渡される値を宣言します names:['peanut','javascriptKing']
    }
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

<テンプレート>
  <h2>私は第 1 レベルの子コンポーネントです</h2>
  👇
  <sub2/>
</テンプレート>
<スクリプト>
  「./sub2」からsub2をインポートします。
	エクスポートデフォルト{
		名前: "sub1",
    コンポーネント:{
			サブ2、
    }
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

<テンプレート>
  <h3>私は末っ子、孫です</h3>
  <div>トップレベルコンポーネントの名前配列を参照しました ===> {{names}}</div>
</テンプレート>
<スクリプト>
	エクスポートデフォルト{
		名前: "sub2",
    // inject:['names'] を通じて子コンポーネントでクロスレベル値を受け入れます。
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

<テンプレート>
  <div style="border: 1px solid pink">
    <h1>私はあなたの父親です</h1>
    👇
    <sub1/>
  </div>
</テンプレート>
<スクリプト>
  './sub1' から sub1 をインポートします
	エクスポートデフォルト{
		名前:「アプリ」、
    データ（）{
			戻る {
				名前:['ピーナッツ','javascriptキング']
      }
    },
    コンポーネント:{
			サブ1、
    },
    /*このように書いても、this は取得されません。現時点では、スクリプト内の this のスコープが未定義であることを意味します*/
    /*提供する：{
			this.names、
    }*/
  // 次のように記述する必要があります provide(){
    	戻る {
    		名前:this.names
      }
    }
	}
</スクリプト>
<スタイルスコープ>
</スタイル>

<テンプレート>
  <div style="border: 1px solid pink">
    <h1>私はあなたの父親です</h1>
    👇
    <sub1/>
  </div>
</テンプレート>
<スクリプト>
  './sub1' から sub1 をインポートします
  'vue' から { computed } をインポートします
	エクスポートデフォルト{
		名前:「アプリ」、
    データ（）{
			戻る {
				名前:['ピーナッツ','javascriptキング']
      }
    },
    コンポーネント:{
			サブ1、
    },
    /*このように書いても、this は取得されません。現時点では、スクリプト内の this のスコープが未定義であることを意味します*/
    /*提供する：{
			this.names、
    }*/
  // 次のように記述する必要があります provide(){
    	戻る {
    		names:computed(() =>{ this.names.length }) // 計算プロパティを使用して変数を返すことで、names がデータ内の名前と依存関係を形成するようにします}
    },
    マウント() {
    	設定間隔(()=>{
    		this.names.push('vue king!')
      },1000)
    }
	}
</スクリプト>
<スタイルスコープ>
</スタイル>