vue2 provide inject vue2实现provide inject传递响应式

// 父级组件提供 'foo'
var Provider = {
data(){
    return {
        foo: 'bar'
    }
}
  provide: {
    fooProvide: this.fooFn // 传递一个引用类型函数过去
  },
 methods:{
     fooFn() {
        return this.foo
      }
 }
}

var Child = {
  inject: ['fooProvide'],
  computed:{
      fooComputed(){
          return this.fooProvide()  // 因为传递过来是个引用类型的函数
      }
  }
  created () {
    console.log(this.fooComputed) 
  }
  // ...
}

// 父级组件提供 'foo'
var Provider = {
data(){
    return {
        foo: 'bar',
        other:'...'
    }
}
  provide: {
    app: this// 传递整个this过去
  },
  mounted(){
      const that = this
      setTimeout(()=>{
          that.foo = '改变值'
      },4000)
  }
}

var Child = {
  inject: ['app'],
  created () {
    console.log(this.app.foo)  // this.app 下面都是响应式的,因为都是同一实例下的引用
  }
  // ...
}

// 父级组件提供 'fooProvide'
@Provide('fooProvide') // 随意起名,传递跟接收一样就行.但一般保持跟下面变量一样
fooProvide = this.refreshNumFn // 变量接收一下要传递的值
refreshNumFn() {
  return this.refreshNum
}

// 子组件接收
@Inject('fooProvide') fooProvide: any
get valueA(): any {
    return this.fooProvide()
  }
mounted(){
    console.log(this.valueA) // ...
}