Vue2.x 中，通过provide和inject实现祖孙组件传值

最新推荐文章于 2025-03-01 17:25:33 发布

发呆的小蔡°

最新推荐文章于 2025-03-01 17:25:33 发布

阅读量1.9k

点赞数 1

分类专栏： Vue(Vue2) 文章标签： javascript Vue 祖孙组件通信

本文链接：https://blog.youkuaiyun.com/Shivy_/article/details/127968325

版权

Vue(Vue2) 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue.js中provide和inject的功能，它们被用来实现祖孙组件间的通信。通过实例展示了如何在祖先组件中提供数据，并在子孙组件中注入这些数据，无论组件层级有多深。

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

介绍

使用provide 和 inject 可以实现祖孙组件之间的通信；通常这两个属性要一起使用；祖先组件通过 provide将需要向子孙组件传递的值return 出去；然后子孙组件通过inject注入依赖；不管层级有多深，都可以使用祖先组件传递过来的数据以及方法。祖孙组件的传值，一般用于多层级的关系当中，使用便捷。

使用

祖先组件：

<script>
export default {
  data() {
    return {
      user: {
        name: 'lisa',
        age: 14,
      },
      number: 1,
      list: [
        {
          index: 0,
          str: 'first'
        },{
          index: 1,
          str: 'second'
        }
      ]
    }
  },
  provide() {
    return {
      state: this,  // 将整个this 传递给子孙组件
    }
  }
}
</script>

子孙组件：

 <template>
    <div class="son">
      <span>{{state.member}}</span>
    </div>
 </template>
<script>
export default {
   inject: ['state'], //注入依赖
   data() {
    return {
    }
  },
	created() {
	  console.log(this.state); // 打印祖先组件传递过来的整个this对象
	}
}
</script>