vue3.0跨层级组件之间传值provide与inject

vue3.0跨层级组件之间传值provide与inject

 

### 夸层级组件通讯

父组件App

   <template>
    <h2>provide与inject</h2>
    <p>当前的颜色:{{color}}</p>
    <button @click="color='yellow'">黄色</button>
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <hr>

    <Child />

<hr>


</template>

<script>
import Child from './components/Child'
import {ref,defineComponent, provide} from 'vue'

export default defineComponent({
  name:'App',
  components:{
    Child
  },
  setup(){
    const color = ref('red');
    //提供数据
    provide('test',color)
    return{
      color
    }

  
  }
 

})
</script>

子组件Child

<template>
  <h2>son子组件</h2>
  <hr>
    <GrandSon />
</template>

<script>
import GrandSon from './GrandSon'
import {defineComponent} from 'vue'

export default defineComponent({
    name:'son',
    components:{
        GrandSon
    }

}) 
</script>

<style>

</style>

孙子组件

<template>
  <h2 :style="{color}"> GrandchSon孙子组件</h2>
  
</template>

<script>
import {defineComponent, inject} from 'vue'
export default defineComponent({
    name:'grandson',
    setup(){
        // 提供注入
        const color = inject('test');
        return {
            color
        }
    }


}) 
</script>

<style>

</style>