vue inject和provide

作者：Haggard憔悴发布日期:2026-03-31 浏览:43

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from parent!'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

解释说明

provide: 在父组件中使用 provide 选项，可以向下层所有子孙组件提供数据。在这个例子中，父组件通过 provide 提供了一个名为 message 的属性。
inject: 在子组件中使用 inject 选项，可以从父组件注入相应的属性。在这个例子中，子组件通过 inject 注入了父组件提供的 message 属性，并在模板中直接使用。

这种方式非常适合用于跨层级传递数据，而不需要通过 props 或事件层层传递。

上一篇：vue router.push

下一篇：vue获取当前页面路由