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