Vue之依赖注入——provide/inject的使用

解决深层组件使用prop导致的深层透传问题

常规使用

静态数据，非响应式

父组件

  provide: {
    name: 'zs',
    age: 65,
    gender: '男'
  }

子组件

  inject: ['name', 'age', 'gender'],
  created () {
    console.log(this.name) // => "zs"
  }

响应式数据

数据变化从上往下流动

注意：

1. 注入数据为对象才能实现，当为Number,String，Boolean等基本类型时变化无法向下流动。
2. provide为函数格式
3. 子代组件使用watch监听变化，也可以直接取响应式数据的值

父组件

provide() {
    return {
       grandPaInfo: this.grandPaInfo
    }
},
data() {
    return {
        grandPaInfo: {
            age: 65,
            gender: '男'
        }
    }
}

子组件

inject: {
    grandPaInfo: {
        from: 'grandPaInfo'
    }
},

需要特别注意

project/inject只能在直系亲属之间隔代传递，如爷爷组件给孙子传，或孙子更深层次的直系子组件