So richten Sie die Eltern-Kind-Kommunikation in vuejs ein

So richten Sie die Eltern-Kind-Kommunikation in vuejs ein: 1. Die übergeordnete Komponente verwendet Requisiten, um Daten an die untergeordnete Komponente zu übergeben. 2. Die untergeordnete Komponente sendet Nachrichten über „$emit“ an die übergeordnete Komponente. 3. Verwenden Sie „. sync“-Syntaxzucker; 4. Verwenden Sie „ $attrs“ und „$listeners“; 5. Verwenden Sie private und inject.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vue Es gibt mehrere Möglichkeiten, zwischen übergeordneten und untergeordneten Komponenten zu kommunizieren:

• props

• $emit – Komponentenkapselung wird häufiger verwendet

• .sync – syntaktischer Zucker

• $attrs und $listeners – werden häufig für die Komponentenkapselung verwendet

• privide und inject – Komponenten höherer Ordnung

Im Folgenden werden

1 bzw. props

vorgestellt, die häufig im Alltag verwendet werden Entwicklung, um es einfach auszudrücken: Wir können Daten über Requisiten an Unterkomponenten weitergeben, genau wie bei einer Wasserleitung. Die Daten von der übergeordneten Komponente fließen von oben nach unten zur Unterkomponente und können nicht zurückfließen. Dies ist auch der einzelne Datenfluss der Designeinführung von Vue.

<div id="app">
  <child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
  template: &#39;<h2>{{ content }}</h2>&#39;,
  props: {
    content: {
      type: String,
      default: () => { return &#39;from child&#39; }
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;from parent&#39;
  },
  components: {
    Child
  }
})

2. $emit

Die offizielle Einführung besteht darin, Ereignisse auf der aktuellen Instanz auszulösen, und zusätzliche Parameter werden an den Listener-Rückruf übergeben.

<div id="app">
  <my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
  template: &#39;<button @click="triggerClick">click</button>&#39;,
  data () {
    return {
      greeting: &#39;vue.js!&#39;
    }
  },
  methods: {
    triggerClick () {
      this.$emit(&#39;greet&#39;, this.greeting)
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  components: {
    MyButton
  },
  methods: {
    sayHi (val) {
      alert(&#39;Hi, &#39; + val) // &#39;Hi, vue.js!&#39;
    }
  }
})

3. Der .sync-Modifikator

existierte früher als bidirektionale Bindungsfunktion in vue1.x, das heißt, die untergeordnete Komponente kann den Wert in der übergeordneten Komponente ändern. Da es gegen das Designkonzept des unidirektionalen Datenflusses verstößt, wurde es in vue2.x entfernt, aber dieser .sync-Modifikator wurde in vue 2.3.0+ und höher wieder eingeführt. Es existiert jedoch nur als syntaktischer Zucker zur Kompilierungszeit. Es wird als V-On-Listener erweitert, der die Eigenschaften der übergeordneten Komponente automatisch aktualisiert.

In einigen Fällen müssen wir möglicherweise eine „Zwei-Wege-Bindung“ an einer Requisite durchführen. Leider führt eine echte bidirektionale Bindung zu Wartungsproblemen, da untergeordnete Komponenten ihre übergeordneten Komponenten ändern können, ohne dass eine offensichtliche Änderungsquelle für die übergeordneten oder untergeordneten Komponenten vorliegt.

Der syntaktische Zucker wird in der folgenden Form geschrieben

<text-document
    v-bind:title="doc.title"
    v-on:update:title="doc.title = $event">
</text-document>

So können wir .sync-Syntaxzucker verwenden, um ihn in der folgenden Form abzukürzen:

<text-document v-bind:title.sync="doc.title"></text-document>

So erreichen wir eine bidirektionale Bindung, indem wir beispielsweise den Wert im Text ändern Feld der untergeordneten Komponente, während der Wert im Wert der übergeordneten Komponente geändert wird, lautet der Code wie folgt:

<div id="app">
  <login :name.sync="userName"></login> {{ userName }}
</div>

let Login = Vue.extend({
  template: `
    <div class="input-group">
      <label>姓名:</label>
      <input v-model="text">
    </div>
  `,
  props: [&#39;name&#39;],
  data () {
    return {
      text: &#39;&#39;
    }
  },
  watch: {
    text (newVal) {
      this.$emit(&#39;update:name&#39;, newVal)
    }
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    userName: &#39;&#39;
  },
  components: {
    Login
  }
})

Der Code enthält nur einen Satz:

this.$emit('update:name', newVal)

Die offizielle Syntax lautet: update:myPropName, wobei myPropName den Prop-Wert darstellt aktualisiert werden. Wenn Sie .sync-Syntaxzucker nicht verwenden und oben .$emit verwenden, können Sie natürlich den gleichen Effekt erzielen

4 $attrs und $listeners

Die offizielle Website erklärt $attrs wie folgt:

Enthält Elemente, die sich nicht im übergeordneten Bereich befinden. Eigenschaftsbindungen (außer Klasse und Stil), die als Requisiten erkannt (und abgerufen) werden. Wenn eine Komponente keine Requisiten deklariert, werden alle übergeordneten Bereichsbindungen (außer Klasse und Stil) hier einbezogen, und interne Komponenten können über v-bind="$attrs" übergeben werden – beim Erstellen von Komponenten auf hoher Ebene Sehr nützlich.

Die offizielle Website erklärt $listeners wie folgt:

Enthält V-on-Ereignis-Listener im übergeordneten Bereich (ohne .native-Modifikator). Es kann über v-on="$listeners" an interne Komponenten übergeben werden – sehr nützlich beim Erstellen von Komponenten auf höherer Ebene.

$attrs- und $listeners-Attribute sind wie zwei Speicherboxen, eine ist für die Speicherung von Attributen und die andere für die Speicherung von Ereignissen verantwortlich. Beide speichern Daten in Form von Objekten

<div id="app">
  <child
    :foo="foo"
    :bar="bar"
    @one.native="triggerOne"
    @two="triggerTwo">
  </child>
</div>

let Child = Vue.extend({
  template: &#39;<h2>{{ foo }}</h2>&#39;,
  props: [&#39;foo&#39;],
  created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar"}
    // -> {two: fn}
    // 这里我们访问父组件中的 `triggerTwo` 方法
    this.$listeners.two()
    // -> &#39;two&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    foo: &#39;parent foo&#39;,
    bar: &#39;parent bar&#39;
  },
  components: {
    Child
  },
  methods: {
    triggerOne () {
      alert(&#39;one&#39;)
    },
    triggerTwo () {
      alert(&#39;two&#39;)
    }
  }
})

Wie Sie sehen können, können wir sie verwenden $attrs und $listeners zum Speichern von Daten. Das Übergeben, Aufrufen und Verarbeiten dort, wo es benötigt wird, ist immer noch sehr praktisch. Natürlich können wir es auch Ebene für Ebene über v-on="$listeners" weitergeben, und die Nachkommen werden endlos sein!

5, privat und inject

Werfen wir einen Blick auf die offizielle Beschreibung von Provide / Inject:

　 Provide und Inject stellen hauptsächlich Anwendungsfälle für High-End-Plug-Ins/Komponentenbibliotheken bereit. Nicht für die direkte Verwendung im Anwendungscode empfohlen. Und dieses Optionspaar muss zusammen verwendet werden, damit eine Vorgängerkomponente eine Abhängigkeit in alle ihre Nachkommen einfügen kann, egal wie tief die Komponentenhierarchie ist, und sie wird immer ab dem Zeitpunkt wirksam, an dem die Upstream- und Downstream-Beziehungen hergestellt werden.

<div id="app">

  <son></son>

</div>

let Son = Vue.extend({
  template: &#39;<h2>son</h2>&#39;,
  inject: {
    house: {
      default: &#39;没房&#39;
    },
    car: {
      default: &#39;没车&#39;
    },
    money: {
      // 长大工作了虽然有点钱
      // 仅供生活费，需要向父母要
      default: &#39;￥4500&#39;
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> &#39;房子&#39;, &#39;车子&#39;, &#39;￥10000&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  provide: {
    house: &#39;房子&#39;,
    car: &#39;车子&#39;,
    money: &#39;￥10000&#39;
  },
  components: {
    Son
  }
})

Weitere Beispiele finden Sie im Element-UI-Quellcode, von dem viele diese Methode verwenden

Verwandte Empfehlungen: „vue.js Tutorial“

Das obige ist der detaillierte Inhalt vonSo richten Sie die Eltern-Kind-Kommunikation in vuejs ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!