Aufrufen der Funktion für untergeordnete Komponenten bei übergeordneten Ereignissen

Kontext

In Vue 2.0 zeigen die Dokumentation und andere deutlich, dass die Kommunikation von Eltern zu Kind über Requisiten erfolgt.

Frage

Wie sagt ein Elternteil seinem Kind über Requisiten, dass ein Ereignis passiert ist?

Soll ich mir nur eine Requisite namens Event ansehen? Das fühlt sich nicht richtig an und es gibt auch keine Alternativen ( $emit/ $onist für Kinder zu Eltern und ein Hub-Modell ist für entfernte Elemente).

Beispiel

Ich habe einen übergeordneten Container und er muss seinem untergeordneten Container mitteilen, dass es in Ordnung ist, bestimmte Aktionen auf einer API auszuführen. Ich muss in der Lage sein, Funktionen auszulösen.

Geben Sie der untergeordneten Komponente ein refund $refsrufen Sie mit dieser Methode direkt eine Methode für die untergeordnete Komponente auf.

html:

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>  
</div>

Javascript:

var ChildComponent = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

Weitere Informationen finden Sie in der Vue-Dokumentation zu Refs .

Was Sie beschreiben, ist eine Zustandsänderung im übergeordneten Element. Sie geben das über eine Requisite an das Kind weiter. Wie Sie vorgeschlagen haben, würden Sie watchdiese Requisite. Wenn das Kind Maßnahmen ergreift, benachrichtigt es das Elternteil über ein emit, und das Elternteil kann dann den Status erneut ändern.

var Child = {
  template: '<div>{{counter}}</div>',
  props: ['canI'],
  data: function () {
    return {
      counter: 0
    };
  },
  watch: {
    canI: function () {
      if (this.canI) {
        ++this.counter;
        this.$emit('increment');
      }
    }
  }
}
new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  data: {
    childState: false
  },
  methods: {
    permitChild: function () {
      this.childState = true;
    },
    lockChild: function () {
      this.childState = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<my-component :can-I="childState" v-on:increment="lockChild"></my-component>
<button @click="permitChild">Go</button>
</div>

Wenn Sie wirklich Ereignisse an ein Kind weitergeben möchten, können Sie dies tun, indem Sie indem Sie einen Bus erstellen (der nur eine Vue-Instanz ist) und ihn als Requisite an das Kind übergeben .

Sie können $emitund verwenden $on. Verwenden des @ RoyJ-Codes:

html:

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

Javascript:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

Laufendes Beispiel: https://jsfiddle.net/rjurado/m2spy60r/1/

Wenn Sie Zeit haben, verwenden Sie den Vuex-Speicher, um Variablen (auch bekannt als Status) zu beobachten oder eine Aktion direkt auszulösen (auch bekannt als Versand).

Mochte den Event-Bus-Ansatz mit $onBindungen im Kind während nicht create. Warum? Nachfolgende createAnrufe (ich benutzevue-router ) binden den Nachrichtenhandler mehr als einmal, was zu mehreren Antworten pro Nachricht führt.

Die orthodoxe Lösung, Requisiten von einem Elternteil an ein Kind weiterzugeben und dem Kind einen Immobilienbeobachter zu geben, funktionierte etwas besser. Das einzige Problem ist, dass das Kind nur auf einen Werteübergang reagieren kann. Wenn Sie dieselbe Nachricht mehrmals weitergeben, ist eine Art Buchhaltung erforderlich, um einen Übergang zu erzwingen, damit das Kind die Änderung abholen kann.

Ich habe festgestellt, dass die Nachricht, wenn ich sie in ein Array einbinde, immer den untergeordneten Watcher auslöst - auch wenn der Wert gleich bleibt.

Elternteil:

{
   data: function() {
      msgChild: null,
   },
   methods: {
      mMessageDoIt: function() {
         this.msgChild = ['doIt'];
      }
   }   
   ...
}

Kind:

{
   props: ['msgChild'],
   watch: {
      'msgChild': function(arMsg) {
         console.log(arMsg[0]);
      }
   }
}

HTML:

<parent>
   <child v-bind="{ 'msgChild': msgChild }"></child>
</parent>

Eine einfache entkoppelte Methode zum Aufrufen von Methoden für untergeordnete Komponenten besteht darin, einen Handler vom untergeordneten Element auszugeben und ihn dann vom übergeordneten Element aufzurufen.

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
  	setValue(value) {
    	this.value = value;
    }
  },
  created() {
    this.$emit('handler', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
  	setValueHandler(fn) {
    	this.setter = fn
    },
    click() {
    	this.setter(70)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <my-component @handler="setValueHandler"></my-component>
  <button @click="click">Click</button>  
</div>

Der Elternteil verfolgt die Funktionen des untergeordneten Handlers und ruft bei Bedarf auf.

Das folgende Beispiel ist selbsterklärend. Hier können Referenzen und Ereignisse verwendet werden, um Funktionen von und zu Eltern und Kind aufzurufen.

// PARENT
<template>
  <parent>
    <child
      @onChange="childCallBack"
      ref="childRef"
      :data="moduleData"
    />
    <button @click="callChild">Call Method in child</button>
  </parent>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.childRef.childMethod('Hi from parent');
    },
    childCallBack(message) {
      console.log('message from child', message);
    }
  }
};
</script>

// CHILD
<template>
  <child>
    <button @click="callParent">Call Parent</button>
  </child>
</template>

<script>
export default {
  methods: {
    callParent() {
      this.$emit('onChange', 'hi from child');
    },
    childMethod(message) {
      console.log('message from parent', message);
    }
  }
}
</script>

Ich denke, wir sollten über die Notwendigkeit nachdenken, dass Eltern die Methoden des Kindes anwenden müssen. Tatsächlich müssen Eltern die Methode des Kindes nicht betreffen, sondern können die untergeordnete Komponente als FSA (Finite State Machine) .Parents-Komponente behandeln So reicht die Lösung aus, um die Statusänderung zu beobachten oder einfach die Rechenfunktion zu verwenden

Sie können den Schlüssel verwenden, um die untergeordnete Komponente mithilfe des Schlüssels neu zu laden

<component :is="child1" :filter="filter" :key="componentKey"></component>

Wenn Sie eine Komponente mit neuem Filter neu laden möchten, klicken Sie auf die untergeordnete Komponente, wenn Sie auf die Schaltfläche klicken

reloadData() {            
   this.filter = ['filter1','filter2']
   this.componentKey += 1;  
},

und verwenden Sie den Filter, um die Funktion auszulösen