2025年provide 和 inject如何使用？

科技前沿 • 2025-02-19 16:11 • 阅读 50

大家好，我是讯享网，很高兴认识大家。

s在 Vue.js 中，provide 和 inject 是一种实现跨组件的数据共享的方法，特别适合在多级嵌套的组件间共享数据。

provide 和 inject 的基本用法如下：

在父组件中使用 provide 选项提供（也就是发布）数据。provide 可以是一个对象或者是一个返回对象的函数。对象的属性名是要发布的数据的名称，属性值是要发布的数据。
在任何子孙组件中，你可以使用 inject 选项注入（也就是订阅）数据。inject 是一个字符串数组，数组的元素是要订阅的数据的名称。

讯享网

下面是一个简单的示例：

<!-- Parent.vue --> <template> <Child></Child> </template> <script> import Child from './Child.vue'; export default { components: { Child, }, provide() { return { message: 'Hello from parent!', }; }, }; </script>

讯享网

讯享网<!-- Child.vue --> <template> <div>{ 
  
    
  { message }}</div> </template> <script> export default { inject: ['message'], }; </script>

在这个例子中，Parent 组件使用 provide 选项发布了一个名为 message 的数据，然后 Child 组件使用 inject 选项订阅了这个数据。这样，Child 组件就可以直接在模板中使用 message 数据了，而不需要通过 props 从父组件接收。

需要注意的是，provide 和 inject 主要在高阶插件/组件库中使用。并不推荐在应用程序代码中广泛使用，因为这会使得组件之间的数据流难以追踪和理解。

2025年provide 和 inject如何使用？

相关推荐