Vue.js 中的 provide 和 inject：实现祖孙组件通信

Vue.js 中的 provide 和 inject：实现祖孙组件通信

在 Vue.js 的组件化开发中，父子组件之间的通信通常是通过 props 和 $emit 来实现的。然而，当涉及到跨层级的组件通信（如祖孙组件之间）时，这种通信方式可能会变得复杂且不够灵活。Vue.js 提供了 provide 和 inject 两个特性，专门用于解决这种跨层级组件通信的问题，实现祖孙组件之间的直接数据传递，而无需通过中间的父组件。

场景引入：祖孙组件通信的需求

假设我们有一个家庭管理系统，包含以下组件结构：

• 父组件（Father）：管理家庭的财产信息，如金钱和汽车。

• 子组件（Child）：作为中间层，但不参与数据传递。

• 孙组件（Grandchild）：需要直接访问和修改祖组件（父组件）的数据。

我们的目标是实现以下功能：

1. 祖组件（父组件）向孙组件传递数据（如金钱和汽车信息）。

2. 孙组件直接修改祖组件的数据（如花钱或更新汽车信息）。

3. 整个过程不干扰中间的子组件。

一、provide：向后代组件提供数据

provide 是一个函数，用于在父组件中向其所有后代组件提供数据。它接受两个参数：

1. 键名（key）：用于标识数据的名称。

2. 值（value）：需要传递的具体数据。

爷爷组件中的实现

在爷爷组件中，我们可以通过 provide 提供数据。例如，我们希望传递金钱和汽车信息：

<template>
  <div>
    <h4>银子：{{ money }}万元</h4>
    <h4>车子：一辆{{ car.brand }}车，价值{{ car.price }}万元</h4>
    <Child />
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    const money = ref(100); // 父组件的金钱
    const car = ref({
      brand: '奔驰',
      price: 100
    }); // 父组件的汽车信息

    // 使用 provide 向后代组件提供数据
    provide('money', money);
    provide('car', car);

    return { money, car };
  }
};
</script>

二、inject：在后代组件中注入数据

inject 是一个函数，用于在后代组件中注入由 provide 提供的数据。它可以根据提供的键名获取对应的值。

孙组件中的实现

在孙组件中，我们可以通过 inject 获取祖组件提供的数据，并直接操作这些数据。例如，我们希望获取并修改爷爷组件的金钱和汽车信息：

<template>
  <div>
    <p>银子：{{ money }}万元</p>
    <p>车子：一辆{{ car.brand }}车，价值{{ car.price }}万元</p>
    <button @click="spendMoney">花爷爷的钱</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    // 使用 inject 获取祖组件提供的数据
    const money = inject('money');
    const car = inject('car');

    // 定义一个方法，用于修改祖组件的金钱
    const spendMoney = () => {
      money.value -= 6; // 花掉 6 万元
    };

    return { money, car, spendMoney };
  }
};
</script>

因为car的属性子孙子组件可能不知道，我们可以通过赋予默认值来推断出来，比如inject('car',{brand:'未知',price:0});

三、实现祖孙组件的双向通信

除了从祖组件向孙组件传递数据，我们还可以通过 provide 提供一个方法，让孙组件能够直接修改祖组件的数据。

爷爷组件中提供方法

在爷爷组件中，我们定义一个方法（如 updateMoney），并通过 provide 提供给后代组件：

<script>
import { provide, ref } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    const money = ref(100);
    const car = ref({
      brand: '奔驰',
      price: 100
    });

    // 定义一个方法，用于更新金钱
    const updateMoney = (amount) => {
      money.value += amount;
    };

    // 提供数据和方法
    provide('money', money);
    provide('car', car);
    provide('updateMoney', updateMoney);

    return { money, car };
  }
};
</script>

孙组件中调用方法

在孙组件中，我们通过 inject 获取并调用祖组件提供的方法：

<script>
import { inject } from 'vue';

export default {
  setup() {
    const money = inject('money');
    const updateMoney = inject('updateMoney');

    const spendMoney = () => {
      updateMoney(-6); // 调用祖组件的方法，花掉 6 万元
    };

    return { money, spendMoney };
  }
};
</script>

四、provide 和 inject 的优势

1. 零打扰通信：通过 provide 和 inject，祖孙组件可以直接通信，无需通过中间的父组件，减少了组件之间的耦合。

2. 灵活性高：不仅可以传递数据，还可以传递方法，实现复杂的交互逻辑。

3. 响应式支持：通过传递 ref 或 reactive 对象，确保数据的响应式更新。

五、总结

Vue.js 中的 provide 和 inject 提供了一种强大的机制，用于实现跨层级组件之间的通信。通过祖孙组件的直接通信，我们可以避免中间层的干扰，实现更灵活、更高效的组件交互。

但是在使用provide和inject的时候需要注意类型推断问题：在使用 TypeScript 时，provide 和 inject 的类型推断可能不够准确。可以通过显式指定类型或使用默认值来解决。