什麼是provide？什麼是inject？
provide和inject也是讓元件間通訊的方法，需要成對出現，他們和props及emit的不同處在於，props及emit元件之間的傳遞只能在一層內傳遞，而provide及inject可以跨多層傳遞。

• props及emit
  

• provide及inject
  
  範例：
  目標：讓每個元件都接收可以顯示最上層元件（GrandparentComponent）的資料內容。
  GrandparentComponent.vue

<template>
  <div>
    <p>Grandparent Component: {{ grandparentData }}</p>
    <parent-component></parent-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grandparentData: 'Data from Grandparent'
    };
  },
  provide() {
    return {
      grandparentData: this.grandparentData
    };
  }
};
</script>

ParentComponent.vue

<template>
  <div>
    <p>Parent Component: {{ grandparentData }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  inject: ['grandparentData']
};
</script>

ChildComponent.vue

<template>
  <div>
    <p>Child Component: {{ grandparentData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['grandparentData']
};
</script>

main.js

import { createApp } from 'vue';
import GrandparentComponent from './GrandparentComponent.vue';
import ParentComponent from './ParentComponent.vue';
import ChildComponent from './ChildComponent.vue';

var app = createApp(GrandparentComponent);
app.component('parent-component', ParentComponent);
app.component('child-component', ChildComponent);
app.mount('#app');

執行結果：

說明：
創建三個元件，分別為GrandparentComponent、ParentComponent以及ChildComponent。

1. GrandparentComponent：
   給定屬性grandparentData，內容為字串型態"Data from Grandparent"。
   並使用provide，可以將內容傳遞給其他子元件。
   <parent-component></parent-component>作用是告訴Vue在此處渲染ParentComponent元件的内容。

2. ParentComponent：
   透過inject注入grandparentData屬性，可以接收GrandparentComponent的資料。
   <child-component></child-component>作用是告訴Vue在此處渲染ChildComponent元件的内容。

3. ChildComponent：
   和ParentComponent一樣，透過inject注入grandparentData屬性，可以接收GrandparentComponent的資料。