关于javascript:Vue中provide-inject属性

provide 选项应该是一个对象或返回一个对象的函数。该对象蕴含可注入其子孙的 property

示例:

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

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

provide传的值是不能响应的,在父组件中改了provide外面的值,后辈注入的值,是无奈响应监听到变动的

然而如果provide传入的是一个对象,那么后辈组件中是能够监听到变动的

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

// 子组件注入 'foo'
var Child = {
  inject: ['foo']
}

那怎么改provide外面对象的值呢?

this._provided.foo.a=2

此时a就会变成2,后辈组件在页面渲染或者数据中应用foo对象中a的值也会变成2