Vue3---provide与inject：实现跨层级组件(祖孙)间通信

• 父组件，导入provide并通过provide传值。注：provide只能在setup的最外层使用，不能在自定义的函数中使用，否则无效

<template>
    <h1>父级组件</h1>
    <div>当前颜色：{
   
   { color }}</div>
    <div>
        <el-button type="danger" @click="changeColor('red')">红色</el-button>
        <el-button type="primary" @click="changeColor('blue')">蓝色</el-button>
        <el-button type="success" @click="changeColor('green')">绿色</el-button>
    </div>
    <hr />
    <Son />
</template>
<script>
import { defineComponent, provide, ref } from 'vue'
import Son from '../components/Son'


export default defineComponent({
    name: 'Parent',
    components: {
        Son
    },
    setup(){
        const color = ref('red')
        function changeColor (newColor) {
            color.value = newColor
        }
        provide('currentColor', color) // provide传值，provide只能在setup的最外层使用
        return {
            color,
            changeColor
        }
    }
})
</script>

• 子组件，注：子组件也是可以通过inject接受到父组件传过来的值

<template>
    <h1>子组件</h1>
    <hr />
    <Grandson />
</template>
<script>
import { defineComponent } from 'vue'
import Grandson from '../components/Grandson'

export default defineComponent({
    name: 'Son',
    components: {
        Grandson
    },
    setup(){
        return {}
    }
})
</script>

• 孙子组件，导入inject并通过inject接受最上级组件传的值

<template>
    <h1 :style="{color}">孙子组件</h1>
</template>
<script>
import { defineComponent, inject } from 'vue'

export default defineComponent({
    name: 'Grandson',
    setup(){
        const color = inject('currentColor') // inject接受值
        return {
            color
        }
    }
})
</script>