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

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

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

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #Vue #祖孙组件通信

Vue(Vue2) 专栏收录该内容

10 篇文章

订阅专栏

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

介绍

使用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>