Vue2-Implementierungen bieten Injection für Reaktionsfähigkeit

1. Konventionelles Schreiben in vue2

// 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) 
  }
  // ...
}

2. Die unkonventionelle Schreibweise in vue2, aber bequem zu verwenden. (Die Verwendung ist wahrscheinlich dieselbe, aber der übergebene Wert wird zu diesem --> die gesamte Instanz)

// 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}
  // ...
}

3. vue2 + ts (denn wenn Sie ts noch nie verwendet haben, wissen Sie nicht wirklich, wie man es benutzt, also hier ein Beispiel)

Methode angeben:
1. @Provide() foo = "foo"
2. @Provide('bar') baz = 'bar'

Injektionsmethode:
1. @Inject() foo: Zeichenfolge
2. @Inject('bar') bar: Zeichenfolge
3. @Inject(s) baz: Zeichenfolge

Beispiel:

// 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) // ...
}

Dies ist das Ende dieses Artikels über die Implementierung von Provide Inject durch vue2 zur Bereitstellung von Reaktionsfähigkeit. Weitere verwandte Inhalte zu Provide Inject von vue2 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren: