vue的provide / inject

vue的provide/inject

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

说明

  1. 无论多少层都会被子组建拿到
  2. 主要用在高阶组件
  3. provide 选项应该是一个对象或返回一个对象的函数。
  4. 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就是响应的了

    原文作者:无雪冬天
    原文地址: https://segmentfault.com/a/1190000020301345
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注