vue3 provide 与 inject

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

实现跨层级组件(祖孙)间通信

父

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

<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的功能