vue-provide/inject

provide/inject

provide和inject也是组件之间进行交互的一种策略 类似react的Context Api 祖组件将数据通过provide一层一层往下传

  • provide可以接受方法或者属性对象集合 如果是集合 作用域不能指向自身的vue实例
  • inject接收数组或者属性对象集合

举个🌰 我们列举三个组件 祖先、父组件、子组件

grandPa.vue

1
2
3
4
5
6
7
8
9
10
11
export default {
  // provide的传递方法可以为对象也可以为函数 通常情况下如果传递的值与当前组件无关 则使用对象形式
  provide() {
    return {
      grandPa: this,
    }
  },
  provide: {
    grandPa: this,
  },
}

father.vue

1
2
3
4
5
6
7
8
9
10
11
export default {
  // inject用法和props类似
  inject: ['grandPa'],
  // 也可写成如下方式
  inject: {
    grandPa: {
      type: Object,
      default: () => ({}),
    },
  },
}

provide的执行时机

provide的执行时机出于data和created之间