Come chiamare la funzione sul componente figlio su eventi padre

Contesto

In Vue 2.0 la documentazione e altri indicano chiaramente che la comunicazione da genitore a figlio avviene tramite oggetti di scena.

Domanda

Come fa un genitore a dire a suo figlio che un evento è accaduto tramite oggetti di scena?

Devo solo guardare un oggetto chiamato evento? Ciò non sembra corretto, né esistono alternative ( $emit/ $onè da bambino a genitore e un modello hub è per elementi distanti).

Esempio

Ho un contenitore padre e deve dire al contenitore figlio che va bene eseguire determinate azioni su un'API. Devo essere in grado di attivare le funzioni.

Assegnare un componente figlio a refe utilizzare $refsper chiamare direttamente un metodo sul componente figlio.

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);
    }
  }
})

Per ulteriori informazioni, consultare la documentazione di Vue sui riferimenti .

Quello che stai descrivendo è un cambio di stato nel genitore. Lo passi al bambino tramite un sostegno. Come hai suggerito, faresti watchquel prop. Quando il bambino interviene, avvisa il genitore tramite un emite il genitore potrebbe quindi cambiare di nuovo lo stato.

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>

Se vuoi veramente passare eventi a un bambino, puoi farlo creando un bus (che è solo un'istanza di Vue) e passandolo al bambino come prop .

Puoi usare $emite $on. Utilizzando il codice @RoyJ:

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);
    }
  }
})

Esempio corrente: https://jsfiddle.net/rjurado/m2spy60r/1/

Se hai tempo, usa Vuex store per guardare le variabili (aka state) o attivare (aka dispatch) un'azione direttamente.

Non mi è piaciuto l' approccio del bus degli eventi usando le $onassociazioni nel bambino durante create. Perché? Le createchiamate successive (che sto usando vue-router) associano il gestore messaggi più di una volta, portando a più risposte per messaggio.

La soluzione ortodossa di tramandare gli oggetti di scena da un genitore all'altro e di mettere un osservatore di proprietà nel bambino ha funzionato un po ' meglio. L'unico problema è che il bambino può agire solo su una transizione di valore. Passare lo stesso messaggio più volte richiede una sorta di contabilità per forzare una transizione in modo che il bambino possa prendere la modifica.

Ho scoperto che se avvolgo il messaggio in un array, attiverà sempre il watcher figlio, anche se il valore rimane lo stesso.

Genitore:

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

Bambino:

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

HTML:

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

Un semplice modo disaccoppiato per chiamare metodi su componenti figlio consiste nell'emettere un gestore dal figlio e quindi invocarlo dal genitore.

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>

Il genitore tiene traccia delle funzioni del gestore figlio e chiama quando necessario.

L'esempio seguente è autoesplicativo. dove ref ed eventi possono essere usati per chiamare la funzione da e verso genitore e figlio.

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

Penso che dovremmo prendere in considerazione la necessità del genitore di usare i metodi del bambino, infatti i genitori non devono preoccuparsi del metodo del bambino, ma possono trattare il componente figlio come un FSA (macchina a stati finiti). per controllare lo stato del componente figlio. Quindi è sufficiente la soluzione per guardare il cambiamento di stato o semplicemente usare la funzione di calcolo

puoi usare key per ricaricare il componente figlio usando key

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

Se si desidera ricaricare il componente con un nuovo filtro, se si fa clic sul pulsante, filtrare il componente figlio

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

e utilizzare il filtro per attivare la funzione