vue 中的 provide 和 inject 用法

最新推荐文章于 2025-06-17 20:24:47 发布

原创最新推荐文章于 2025-06-17 20:24:47 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#provide 和 inject 用法

vue 专栏收录该内容

12 篇文章

订阅专栏

本文通过一个具体的Vue.js实例展示了如何在不同层级的组件间传递数据。从最外层组件到子组件再到孙子组件，利用provide/inject API实现数据的逐层传递。这种方式非常适合于单向数据流的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以最外层组件为参考点
//我是一个当前组件(最外层)
<template>
  <div>
    <child />
  </div>
</template>


<script>

import  child  from "./one";//引入子组件
export default {
  provide() {
    return {
      test:"测试"
    };
  },
 
  components: {
    child
  },
 
};
</script>
//////////////////////////////////////////////////



//子级组件
<template>
    <div>
        我是一个子组件
        <span>{{test}}</span>
        <grandson />
    </div>
</template>
<script>
import Grandson from "./two"//引入孙子组件
export default {
     inject: ['test'],
     components: { Grandson }
}
</script>
//////////////////////////////////////////////////



//孙子组件
<template>
    <div>
        我是一个孙子组件
        <span>{{test}}</span>
    </div>
</template>
<script>
export default {
     inject: ['test'],
}
</script>

测试结果