Vue2-Implementierungen bieten Injection für Reaktionsfähigkeit

// Die übergeordnete Komponente stellt „foo“ bereit.
var Anbieter = {
Daten(){
    zurückkehren {
        foo: "Leiste"
    }
}
  bieten:
    fooProvide: this.fooFn // übergebe eine Referenztypfunktion},
 Methoden:{
     fooFn() {
        gib dies zurück.foo
      }
 }
}

var Kind = {
  einfügen: ['fooProvide'],
  berechnet:{
      fooComputed(){
          return this.fooProvide() // Weil die übergebene Funktion ein Referenztyp ist}
  }
  erstellt () {
    Konsole.log(dies.fooComputed) 
  }
  // ...
}

// Die übergeordnete Komponente stellt „foo“ bereit.
var Anbieter = {
Daten(){
    zurückkehren {
        foo: "Leiste",
        andere:'...'
    }
}
  bieten:
    app: this // übergebe das gesamte this past},
  montiert(){
      const das = dies
      setzeTimeout(()=>{
          that.foo = 'Wert ändern'
      },4000)
  }
}

var Kind = {
  injizieren: ['app'],
  erstellt () {
    console.log(this.app.foo) // Alles unterhalb von this.app reagiert, da es sich um Verweise auf dieselbe Instanz handelt}
  // ...
}

// Die übergeordnete Komponente stellt „fooProvide“ bereit.
@Provide('fooProvide') // Nennen Sie es, wie Sie möchten, übergeben Sie nur den gleichen Wert wie den, den Sie erhalten haben. Aber lassen Sie es im Allgemeinen gleich wie die Variable unten fooProvide = this.refreshNumFn // Variable erhält den zu übergebenden Wert refreshNumFn() {
  gib dies zurück.refreshNum
}

// Kindkomponente empfängt @Inject('fooProvide') fooProvide: any
erhalte WertA(): beliebig {
    gib dies zurück.fooProvide()
  }
montiert(){
    konsole.log(dieser.WertA) // ...
}