Vue 的高级特性 provide/inject

Vue 是模块化的开发框架，各个组件存在与不同的父节点下（如下图）。provide/inject 主要解决组件中通信的问题，如下图 E 和 I 之间要通信。必须通过 C、A、D 三个中间节点。

我创建了 7 个节点

结构如下:
其中将 A 节点中的 color 设置为共享变量。

<script>
  
    export default {
        name: "node-A",
     
        data() {
            return {
                color: 'red'
            }
        },
        provide() {
            return {
                // 这里不同直接传入 this.color 。因为 this.color 本身是一个字符串，并不是一个响应式的。
                // 传递名称叫 theme
                theme: this 
            }
        },
      
    }
</script>

其他子节点要获取到 A 节点中数据使用

<template>
    <div>
        <!-- 获得父节点传来的值，当然也可以使用 theme.color 修改父节点的值 -->
        <span :style="{ color: theme.color }">我是 C 节点下面的 F</span><br>
    </div>
</template>

<script>
    export default {
        name: "node-F",
        inject: {
            theme: {
                default: () => ({})
            }
        }
    }
</script>

<style scoped>

</style>

---

扩展内容
github
个人博客