vue2 provide inject

作者：鱼宝宝睡觉觉发布日期:2026-06-06 浏览:78

// 父组件中使用 provide 提供数据
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

// 子组件中使用 inject 接收数据
<template>
  <div>
    {{ message }}
  </div>
</template>

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

解释说明：

provide：父组件通过 provide 方法提供数据，这些数据可以被其所有子孙组件注入。
inject：子组件通过 inject 数组接收父组件提供的数据。在这个例子中，子组件接收了 message 数据，并在模板中进行了展示。

这种方式非常适合在多层级嵌套的组件结构中传递数据，避免了逐层传递 props 的麻烦。

上一篇：vue button

下一篇：vue配置跨域