关于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