利⽤provide/inject实现跨层组件的信息通信-优快云博客

本文链接：https://blog.youkuaiyun.com/Lilico_/article/details/116307238

本文介绍了使用Vue.js开发的父组件如何通过props向子组件传递颜色，以及子组件如何通过注入机制获取并应用颜色到孙子组件的样式中。展示了组件间通信和样式共享的基本实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
  <div>
    <h2>
      我是父组件
    </h2>
    当前的颜色:{{color}}
    <hr>
    <button @click="changeColor('yellow')">黄色</button>
    <button @click="changeColor('red')">红色</button>
    <button @click="changeColor('blue')">蓝色</button>
    <hr>
    <son></son>
  </div>
</template>
<script lang="ts">
import {defineComponent, provide, ref} from 'vue';
import Son from './demo09.vue'
export default defineComponent({
  components: {
    Son
  },
  setup () {
    const color = ref('green')
    provide('color', color)
    function changeColor(val: string) {
      color.value = val
    }

    return {
      changeColor,
      color
    }
  }
})
</script>
<style scoped>
</style>

子组件

<template>
  <div>
    <h2>我是子组件</h2>
    <grand-son></grand-son>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import GrandSon from './demo10.vue'
export default defineComponent({
  components: {
    GrandSon
  }
})
</script>
<style scoped>
</style>

孙子组件

<template>
  <div>
    <h2 :style="{color}">我是孙子组件</h2>
  </div>
</template>
<script lang="ts">
import {defineComponent, inject} from 'vue';
export default defineComponent({
  setup () {
    let color = inject('color')

    return {
      color
    }
  }
})
</script>
<style scoped>
</style>