vue provide 和 inject 的使用

当我们嵌套组件层级过多时,使用注入依赖可以更方便的实现传值: 例如一个组件给他的孙子级组件传值

1. 传递一个数据时

// 首先祖先组件使用provide传输:
  provide() {
    return {
      infos: this.info   //infos是自己取的名字
    }
  },
// 然后后代组件使用reject接收:
   inject:['infos']    //inject和provide在组件中都是与created平级.

2. 传递一个方法

// 先在祖先组件定义一个方法;
 provide() {
    return {
      fun: this.fun   //注意这里不加()
    }
  },
// 然后在后代组件接收使用:
  inject:['fun'],
  created() {
    this.fun()
  }

3. 复合写法

 provide() {
    return {
      infos: this.info,    // 这里是data中定义的数据
      fun: this.fun  // 这里是methods中定义的方法
    }
  },
  // 接收:
  inject:['infos','fun'],  // 使用都是通过this  类似于普通的组件传值