vue provide

作者：嗜血之舞发布日期:2025-07-09 浏览:94

// 父组件中使用 provide 提供数据
<template>
  <div>
    <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 选项用于提供数据。它返回一个对象，其中的属性和方法都可以被子组件注入。
- 在上面的例子中，父组件通过 provide 提供了一个名为 message 的字符串。
inject:
- 在子组件中，inject 选项用于接收父组件提供的数据。它是一个数组或对象，指定要注入的属性名称。
- 在上面的例子中，子组件通过 inject 接收了父组件提供的 message 属性，并在模板中显示出来。

这种方式使得父子组件之间的数据传递更加灵活，尤其适用于多层嵌套的组件结构。

上一篇：vue3 teleport

下一篇：vue 动态style