Vue之注入数据（provide与inject）

最新推荐文章于 2025-10-21 16:10:39 发布

原创

最新推荐文章于 2025-10-21 16:10:39 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文深入探讨Vue框架中组件间的通信方式，重点讲解provide和inject选项的使用。祖先组件利用provide传递数据，而后代组件通过inject接收并使用这些数据，无论组件层级多深，这种数据绑定始终有效。文章通过实例分析App和Coffee组件的互动，展示如何初始化提供和注入的数据，并解释其工作原理。

祖先组件可以通过provide选项，声明提供的数据。

后代组件可以通过inject选项，声明注入的数据。

不论组件层次有多深，在上下游关系成立的时间里始终生效。

一 App组件

<template>
    <div>
        <coffee type="卡布奇诺"/>
    </div>
</template>
<script>
import Coffee from './coffee';

export default {
  name: "App",
  provide: {
    brand: "雀巢"
  },
  components: { Coffee }
};
</script>

二 Coffee组件

<template>
    <h4>{
  
  {brand}} - {
  
  {type}}</h4>
</template>
<script>
export default {
  name: "Coffee",
  inject: ["brand"],
  props: {
    type: String
  }
};
</script>