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

<テンプレート>
  <div>
    <ホーム></ホーム>
    <button @click="addName">名前を追加</button>
  </div>
</テンプレート>
 <スクリプト>
「./Home.vue」から Home をインポートします。
「vue」から computed をインポートします。
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント:
    家、
  },
  提供する（） {
    戻る {
      名前:「張三」
      年齢: 23歳
      長さ: 計算された(() => this.names.length)、
    };
  },
  データ（） {
    戻る {
      名前: ["張三"、"李斯"、"王武"]、
    };
  },
  メソッド: {
    名前を追加します（）{
      this.names.push("ファックユー");
      コンソールログ("hhhh");
    },
  },
};
</スクリプト>
 <スタイルスコープ>
</スタイル>

<テンプレート>
  <div>
    <div>ただいま</div>
    <ホームコンテンツ></ホームコンテンツ>
  </div>
</テンプレート>
 <スクリプト>
「./HomeContent.vue」からHomeContentをインポートします。
エクスポートデフォルト{
  名前: "ホーム",
  コンポーネント:
    ホームコンテンツ、
  },
};
</スクリプト>
 <スタイルスコープ>
</スタイル>

<テンプレート>
  <div>ホームコンテンツ:{{ name }}--{{ age }}---{{ length }}</div>
</テンプレート>
 <スクリプト>
エクスポートデフォルト{
  挿入: ["名前", "年齢", "身長"],
};
</スクリプト>
 <style lang="scss" スコープ>
</スタイル>