vue的provide-inject

jiezi

5 年前

provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

说明

无论多少层都会被子组建拿到
主要用在高阶组件
provide 选项应该是一个对象或返回一个对象的函数。
inject 选项应该是：一个字符串数组，或一个对象，对象的 key 是本地的绑定名，

特别说明

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

最近就碰到了这个问题

// 父级组件提供 'foo'
var Provider = {
  provide: {foo: 'bar'},
  // ...
}

// 子组件注入 'foo'
var Child = {inject: ['foo'],
  created () {console.log(this.foo) // => "bar"
  }
  // ...
}

按照上边的例子，发现如果修改了 Provider 的 foo 值，Child 的 foo 并没有随着更改。官网也说了 provide 并不是响应的。为了解决这个问题需要把 foo 变成 vue 的监听的对象，换句话说就是需要把 foo 变成对象

var Provider = {provide() {return {datas:this.contain}},
  data() {
    return {
      contain:{foo:'foo'}
    };
  },
}
var Child = {inject: ['datas'],
  created () {console.log(this.datas.foo) // => "foo"
  }
  // ...
}

这样修改之后 foo 就是响应的了

vue 的 provide/inject