Vue3 的 inject 和 provide （附源码）

本文介绍: 在前端项目中牵扯的最多的莫过于组件之间的传值了，除了最最常用的props和emit，其实在Vue中还额外提供了另外几种方法。今天分享一种组件之间通信的方法：provide 和 inject。

在前端项目中牵扯的最多的莫过于组件之间的传值了，除了最最常用的 props 和 emit，其实在 Vue 中还额外提供了另外几种方法。今天分享一种组件之间通信的方法：provide 和 inject。

以下是项目的目录结构，其中 index.vue 是进入的首页。在这个页面中引入了 son1.vue 组件，在 son1.vue 中引入了 son2.vue 组件。

右侧是我们项目的页面效果，当我们选中不同的颜色时，下面的三个正方形都会同步进行颜色的更改

这里的单选框没有使用 element plus ，是我直接自己写的。在下方 CSS 中使用了 vue3 新支持的 v–bind 方式进行动态绑定背景色。而后使用了 provide 提供了一个 color 属性。

&lt;template&gt;
    &lt;div class="home"&gt;
        &lt;div class="box" @click.stop="onCheck(1)"&gt;
            <input type="checkbox" v-model="check1" /&gt; 粉色
        </div&gt;
        <div class="box" @click="onCheck(2)"&gt;
            <input type="checkbox" v-model="check2" /&gt; 红色
        </div&gt;
        <div class="box" @click="onCheck(3)">
            <input type="checkbox" v-model="check3" /> 黄色
        </div>
    </div>
    <div class="col"></div>
    <hr />
    <son1></son1>
</template>

<script lang="ts" setup>
import son1 from './components/son1.vue'
let color = ref('red')
provide('color', color)

let check1 = ref(false)
let check2 = ref(true)
let check3 = ref(false)

const onCheck = (index: number) => {
    if (index == 1) {
        if (check1.value &amp;&amp; !check2.value &amp;&amp; !check3.value) {
            return
        }
        check1.value = !check1.value
        check2.value = false
        check3.value = false
        color.value = 'pink'
    } else if (index == 2) {
        if (!check1.value &amp;&amp; check2.value &amp;&amp; !check3.value) {
            return
        }
        check1.value = false
        check2.value = !check2.value
        check3.value = false
        color.value = 'red'
    } else if (index == 3) {
        if (!check1.value &amp;&amp; !check2.value &amp;&amp; check3.value) {
            return
        }
        check1.value = false
        check2.value = false
        check3.value = !check3.value
        color.value = 'yellow'
    }
}
</script>

<style lang="scss" scoped>
.home {
    display: flex;
}

.box {
    margin-right: 10px;
    cursor: pointer;
}

.col {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background: v-bind(color);
}
</style>

<template>
    <h1>son1 组件</h1>
    <div class="col"></div>
    <hr />
    <son2></son2>
</template>

<script setup>
import son2 from './son2.vue'
let color = inject('color')
</script>

<style lang="scss" scoped>
.col {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background: v-bind(color);
}
</style>

<template>
    <h1>son2 组件</h1>
    <button @click="color='blue'">to blue</button> PS.readonly不允许修改
    <div class="col"></div>
</template>

<script setup>
import { readonly } from 'vue';

let color =readonly(inject('color'))
</script>

<style lang="scss" scoped>
.col {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background: v-bind(color);
}
</style>