Vue2 implements provide inject to deliver responsiveness

// The parent component provides 'foo'
var Provider = {
data(){
    return {
        foo: 'bar'
    }
}
  provide:
    fooProvide: this.fooFn // pass a reference type function},
 methods:{
     fooFn() {
        return this.foo
      }
 }
}

var Child = {
  inject: ['fooProvide'],
  computed:{
      fooComputed(){
          return this.fooProvide() // Because the function passed in is a reference type}
  }
  created () {
    console.log(this.fooComputed) 
  }
  // ...
}

// The parent component provides 'foo'
var Provider = {
data(){
    return {
        foo: 'bar',
        other:'...'
    }
}
  provide:
    app: this // pass the entire this past},
  mounted(){
      const that = this
      setTimeout(()=>{
          that.foo = 'Change value'
      },4000)
  }
}

var Child = {
  inject: ['app'],
  created () {
    console.log(this.app.foo) // Everything below this.app is responsive because they are all references to the same instance}
  // ...
}

// The parent component provides 'fooProvide'
@Provide('fooProvide') // Name it whatever you want, just pass the same value as the one you receive. But generally keep it the same as the variable below fooProvide = this.refreshNumFn // Variable receives the value to be passed refreshNumFn() {
  return this.refreshNum
}

// Child component receives @Inject('fooProvide') fooProvide: any
get valueA(): any {
    return this.fooProvide()
  }
mounted(){
    console.log(this.valueA) // ...
}