526互联

组合式api-跨层级组件通信provide和inject

发布时间 2023-08-12 15:21:41作者: 蕝戀

vue2的provide和inject：https://v2.cn.vuejs.org/v2/api/#provide-inject

主要作用：

跨层级传递数据（响应和非相应数据都可以）、方法（函数），顶层可以跨N层传递数据和方法给子孙组件调用。

使用provide和inject可以在不太复杂的场景下，不使用状态管理（vuex、pinia）来解决组件通信问题。

使用provide提供数据，inject接收数据

测试效果：

使用provide提供方法、函数

应用场景：

子组件即便拿到顶层组件的数据，也无法修改，此时就可以使用provide提供方法，将顶层组件的方法传递给任意底层组件，那么底层组件就可以调用顶层组件的方法，从而实现修改顶层组件中的数据。

顶层组件代码：

<script setup>
import SonA from "@/compon/SonA.vue";
import {provide, ref} from "vue";

const money = ref(100)
const money2 = ref(100)
const changeMoney = (newMoney) => {
  money.value -= newMoney
}
// 1. 使用provide函数提供提供需要传递的数据
// 注意：provide可以传递普通数据（非响应式），也可以传递响应式数据，
//      money是ref函数返回的响应式对象，money.value是其中值（非响应式）
//      当传递响应式对象时，顶层组件的数据改变，下层组件中inject的数据也会改变，否则相反。
provide('money', money)
provide('money2', money2.value)  // 虽然money2是响应式数据，但是我传的时候是传.value（非相应），因此money2改变值后，下层的组件不会改变。
// 还可以传递方法
provide('changeMoney', changeMoney)
</script>

<template>
  <div>
    我是父组件
    <SonA/>
  </div>
</template>

son代码:

<script setup>
import GrandSon from "@/compon/GrandSon.vue";
import {inject} from "vue";
const money = inject('money');
</script>

<template>
  <div class="SonA">
    我是SonA, 爸爸的钱 {{ money }}
    <GrandSon></GrandSon>
  </div>
</template>

grandSon代码:

<script setup>
import {inject} from "vue";

const money = inject('money');
const money2 = inject('money2');

const changeMoney = inject('changeMoney');

</script>

<template>
  <div class="grandSon">
    我是孙子, 爷爷的钱: {{ money }}
    <div>
      我是孙子, 爷爷的钱2(非响应式数据): {{ money2 }}
    </div>
    <button @click="changeMoney(10)">花钱-10</button>
  </div>
</template>

测试效果：