一堆问题。

来源：3-10 Vue的组件之高级属性

qq_缺南摸了个北_0

2019-02-16

根 Vue 提供的 provide 函数

provide() {
    console.log('provide')
    const data = {}
    Object.defineProperty(data, 'value', {
      get: () => this.value, // 为什么使用箭头函数就可以解决递归调用了?
      enumerable: true
    })
    Object.defineProperty(data, 'test', {
      get: () => this.test,
      enumerable: true
    })
    return {
      yeye: this,
      // value: this.value,
      data: data,
      // value2: '呵呵'
    }
  }

在根模板里绑定的是 $options.data.value

 data: {
    value: '',
    test: ''
  },
 <input v-model="value" />

provide里定义的 const data ={} 和根模板里定义的 $options.data 有什么联系吗？它们两个难道不是不同的对象吗？

为什么我在跟模板里明明修改的是 $options.data 的数据，在 provide通过 const data 传递给子组件的 inject .data 也会跟着改变呢？

写回答

3回答

Jokcy

2019-02-18

因为你在provider里面定义data的set和get的时候，你修改的是`this.value`，也就是说修改的是`$options.data.value`，所以会造成双向绑定的效果。你在修改msg和value的时候，因为他们是非双向绑定的，所以如果某个时候你的父组件主动修改了provider里面的数据，那么会覆盖你在子组件中进行的修改，这也是vue给出提醒的原因。