Vue2.x 中，通过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>