Vue3 での provide と injection の使用

<テンプレート>
  <erzi-com></erzi-com>
</テンプレート>
<script lang="ts">
「../components/ErZi.vue」からErZiをインポートします。
「vue」から{provide, ref}をインポートします
エクスポートデフォルト{
  名前:"概要",
  コンポーネント:{
    'erzi-com':エルジ
  },
  設定（）{
    giveSunziData=ref({
       100、
       高さ:50,
       bg:'ピンク'
    })
    // 最初のパラメータは共有データの名前です (giveSunzi)
    // 2 番目のパラメータは共有データ (giveSunziData) です
    提供する('Sunzi'、SunziDataを提供する)
  }
}
</スクリプト>

<テンプレート>
    <div>
      <h2>息子のコンポーネント</h2>
      <div>値を取得: {{getFaytherData}}</div>
    </div>
    <hr/>
    <sun-con></sun-con>
</テンプレート>
<script lang="ts">
'vue' から defineComponent をインポートし、 inject します。
「./SunZI.vue」からSunZIをインポートします。
エクスポートデフォルトdefineComponent({
  名前: 'ErZi'、
   コンポーネント:{
     'sun-con':SunZI
   },
    設定（）{
      getFaytherData = inject('giveSunzi'); を取得します。
      戻り値: getFaytherData
    }
});
</スクリプト>

<テンプレート>
    <div>
         <h2>孫コンポーネント</h2>
         <div>取得された値は {{getYeYeData} です。}</div>
    </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent,inject} をインポートします。
エクスポートデフォルトdefineComponent({
   設定（）{
     getYeYeData=inject('giveSunzi'); を取得します。
    戻り値: getYeYeData
   }
});
</スクリプト>