it-swarm.com.de

VueJS - Kindfunktion auslösen

Ich bin neu mit Vuejs (2.0). Ich versuche, diese Funktionalität herunterzufahren:

  • Klicken Sie auf eine Schaltfläche 
  • Auslöserfunktion in untergeordneter Komponente
  • Inkrementnummer in den Daten des Kindes

Das habe ich momentan

HTML: 

<div id="root">
    <cart @addtocart="add()"></cart>
    <button @click="$emit('addtocart')">Add to Cart</button>
</div>

JS:

Vue.component('cart', {
  template: `<span>{{ items }}</span>`,
  data() {
    return {
      items: 0
    }
  },
  methods: {
    add() {
      alert('add');
    }
  }
});


new Vue({
  el: '#root',
  components: ['cart'],
});

Jede Hilfe wäre sehr dankbar. Vielen Dank an alle!

7
Grant Vinson

Sie können einen zentralisierten Hub verwenden, um Ereignisse auszugeben (wie in den Dokumenten docs https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced vorgeschlagen), um dann zuzuhören und darauf zu reagieren diese Ereignisse in Ihren untergeordneten Komponenten. Hier ist ein kurzes Update für Ihren Code, der dies tut:

var eventHub = new Vue();

Vue.component('cart', {
  template: `<span>{{ items }}</span>`,
  data() {
    return {
      items: 0
    }
  },
  created() {
    eventHub.$on('add-item', this.add)
  },
  methods: {
    add() {
      alert('add');
      this.items++;
    }
  }
});


new Vue({
  el: '#root',
  components: ['cart'],
  methods: {
    addToCart() {
        eventHub.$emit('add-item')
    }
  }
});

Ich habe gerade angefangen, Vue selbst zu verwenden, so dass ich möglicherweise falsch liege, aber soweit ich weiß, ist es eine schlechte Idee, eine Kindkomponente von einem bestimmten Elternteil abhängig zu machen, da es die Kindkomponente zwingt, mit diesem Elternteil "gekoppelt" zu werden, und macht es nicht tragbar Das Ausgeben von Ereignissen von einer untergeordneten Komponente aus ist jedoch in Ordnung, da dies nur die Komponente sein würde, die jeden hören lässt, dass etwas passiert. Ich denke, Sie könnten mit this.$parent.$on('add-item', this.method) direkt auf die Eltern und die Ereignisse zugreifen, die sie ausgegeben haben, aber das sieht für mich hackig aus. Wenn Ihre Root- und Child-Komponente auf diese Weise immer eng gekoppelt sind, wäre this.$parent in Ordnung. Das obige Beispiel "Einrichten einer neuen Vue-Instanz" ist wahrscheinlich nur eine andere Möglichkeit, dies zu tun, ohne die untergeordnete Komponente an eine übergeordnete Komponente zu binden, da Vue-Instanzen das Ereignissystem implementieren (wodurch $ emit, $ on-Methoden verfügbar gemacht werden).

10
georaldc

Der Zugriff auf die Variable method mit $children des Parent Vue Component funktioniert hervorragend und hält die Dinge sehr einfach:

<div id="main-component">

   <!-- BUTTON on Main Component that will trigger the method in Child Component -->
   <button @click="$children[0].coolMethod();">I will trigger the a method on Child Component</button>

   <!-- CHILD Component -->
   <some-component-that-has-cool-method></some-component-that-has-cool-method>
</div>

Hinweis: $children[0], da wir uns auf die method beziehen, die sich unter index 0 befindet.

Es gibt andere Wege, dies zu erreichen, und sie werden beschrieben hier .

Hier ist ein Auszug aus dieser Diskussion:

Genauso wie es einen $ parent für eine Komponente gibt, die ein Kind von Einer anderen ist, gibt es ein Kind ($ children? Kann mich nicht recht erinnern) von Kindkomponenten, aber Sie können einfach hinzufügen Einen Verweis auf Ihre Komponente, um vielleicht etwas klarer zu machen.

Viel Glück....

0
Akash