inject的使用
在子组件中，你可以使用inject选项来接收父组件提供的数据。你可以在模板中直接使用这些数据，也可以在子组件的逻辑中进行进一步处理。
下面是一个示例，演示了如何在子组件中使用inject：
代码语言：javascript复制<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提供一个默认值，以避免在没有提供值的情况下出现错误。
下面是一个示例，演示了如何使用默认值：
代码语言：javascript复制<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提供了一种在组件之间共享数据的方式，但过度使用全局注入可能会导致代码的可维护性和可读性降低。因此，应该谨慎使用全局注入，尽量将数据传递限制在组件层次内部。
