vue3 provide与inject（二）

inject的使用

在子组件中，你可以使用inject选项来接收父组件提供的数据。你可以在模板中直接使用这些数据，也可以在子组件的逻辑中进行进一步处理。

下面是一个示例，演示了如何在子组件中使用inject：

<template>
  <div>
    <h2>子组件</h2>
    <p>接收到的值：{{ sharedValue }}</p>
  </div>
</template>

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

export default {
  setup() {
    const sharedValue = inject('sharedValue');

    return {
      sharedValue
    };
  }
};
</script>

在上面的示例中，子组件使用inject('sharedValue')来接收父组件提供的sharedValue数据。然后，在模板中可以直接使用sharedValue。

使用默认值

如果子组件在没有找到对应的provide提供的值时，你可以为inject提供一个默认值，以避免在没有提供值的情况下出现错误。

下面是一个示例，演示了如何使用默认值：

<template>
  <div>
    <h2>子组件</h2>
    <p>接收到的值：{{ sharedValue }}</p>
  </div>
</template>

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

export default {
  setup() {
    const sharedValue = inject('sharedValue', '默认值');

    return {
      sharedValue
    };
  }
};
</script>

在上面的示例中，inject('sharedValue', '默认值')中的'默认值'将作为默认值，在没有找到对应的提供值时使用。

provide和inject的注意事项

跨组件层次的限制

默认情况下，provide和inject只在父组件和其直接子组件之间起作用。如果你希望在更深层次的组件中使用inject，需要在父组件中通过provide提供相应的数据。

不支持响应式更新

使用provide和inject传递的数据不会自动响应式更新。如果你提供的数据是响应式的，它只会在初始化时进行一次响应式转换，后续的更新不会被传递给子组件。

慎用全局注入

虽然provide和inject提供了一种在组件之间共享数据的方式，但过度使用全局注入可能会导致代码的可维护性和可读性降低。因此，应该谨慎使用全局注入，尽量将数据传递限制在组件层次内部。