provide和inject提供依賴注入，功能類似 2.x 的provide/inject

實現跨層級元件(祖孫)間通訊

父

<template>
  <h1>父元件</h1>
  <p>當前顏色: {{color}}</p>
  <button @click="color='red'">紅</button>
  <button @click="color='yellow'">黃</button>
  <button @click="color='blue'">藍</button>
  
  <hr>
  <Son />
</template>

<script lang="ts">
import { provide, ref } from 'vue'
/* 
- provide` 和 `inject` 提供依賴注入，功能類似 2.x 的 `provide/inject
- 實現跨層級元件(祖孫)間通訊
*/

import Son from './Son.vue'
export default {
  name: 'ProvideInject',
  components: {
    Son
  },
  setup() {
    
    const color = ref('red')

    provide('color', color)

    return {
      color
    }
  }
}
</script>
<template>
  <div>
    <h2>子元件</h2>
    <hr>
    <GrandSon />
  </div>
</template>

<script lang="ts">
import GrandSon from './GrandSon.vue'
export default {
  components: {
    GrandSon
  },
}
</script>

<template>
  <h3 :style="{color}">孫子元件: {{color}}</h3>
  
</template>

<script lang="ts">
import { inject } from 'vue'
export default {
  setup() {
    const color = inject('color')

    return {
      color
    }
  }
}
</script>

　其實在子元件中也可以獲取的到

有的類似於uni.$emit於uni.$on的功能