vue3使用7--父子组件跨层传递消息（inject和provide）

 

 

 1、provide 父传孙，跨阶层传

    //父传孙，跨阶层传
    provide('color',color)

2、inject，接收

 

const color = inject('color')

3、代码结构

（1）父代码

<template>
  <h2>provide 与 inject</h2>
  <p>当前的颜色：{{color}}</p>
  <button @click="color='red'">红色</button>
  <button @click="color='yellow'">黄色</button>
  <button @click="color='green'">绿色</button>
  <son />
</template>

<script lang="ts">
import { defineComponent,provide,ref} from 'vue'
import Son from './componets/Son.vue'
export default defineComponent({
  name: 'App',
  components:{
    Son
  },
  setup(){
    //响应式数据
    const color = ref('red')
    //父传孙，跨阶层传
    provide('color',color)
    return{
      color,
    }
  }
})
</script>
<style>
</style>

 （2）子代码

<template>
  <h3>Son子级组件</h3>
  <grand-son />
  <hr />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import GrandSon from "./GrandSon.vue";
export default defineComponent({
  name: "Son",
  components: {
    GrandSon,
  },
});
</script>
<style>
</style>

（3）孙代码

<template>
    <h3 :style="{color}">Son子级组件</h3>
    <!-- <h3>Son子级组件</h3> -->
    
</template>
<script lang="ts">
import { defineComponent,inject} from 'vue'
export default defineComponent({
    name: 'GrandSon',
    setup(){
        const color = inject('color')
        return{
            color
        }
    }
})
</script>
<style>
</style>