Come accedere a un metodo figlio dal genitore in vue.js

Ho due componenti nidificati, qual è il modo corretto per accedere ai metodi figlio dal genitore?

this.$children[0].myMethod() sembra fare il trucco ma è piuttosto brutto, non è vero, quale può essere il modo migliore:

<script>
import child from './my-child'

export default {
  components: {
   child
  },
  mounted () {
    this.$children[0].myMethod()
  }
}
</script>

Puoi usare il rif .

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {}
  },
  template: `
  <div>
     <ChildForm :item="item" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.$refs.form.submit()
    }
  },
  components: { ChildForm },
})

Se non ti piace l'accoppiamento stretto, puoi usare Event Bus come mostrato da @Yosvel Quintero. Di seguito è riportato un altro esempio di utilizzo del bus degli eventi passando nel bus come oggetti di scena.

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {},
    bus: new Vue(),
  },
  template: `
  <div>
     <ChildForm :item="item" :bus="bus" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.bus.$emit('submit')
    }
  },
  components: { ChildForm },
})

Codice dei componenti.

<template>
 ...
</template>

<script>
export default {
  name: 'NowForm',
  props: ['item', 'bus'],
  methods: {
    submit() {
        ...
    }
  },
  mounted() {
    this.bus.$on('submit', this.submit)
  },  
}
</script>

https://code.luasoftware.com/tutorials/vuejs/parent-call-child-component-method/

Comunicazione genitore-figlio in VueJS

Dato che un'istanza radice di Vue è accessibile da tutti i discendenti tramite this.$root, un componente padre può accedere ai componenti figlio tramite l' this.$childrenarray e un componente figlio può accedere al suo genitore tramite this.$parent, il tuo primo istinto potrebbe essere quello di accedere direttamente a questi componenti.

La documentazione di VueJS mette in guardia contro questo specificamente per due ottimi motivi:

• Accoppia strettamente il genitore al bambino (e viceversa)
• Non puoi fare affidamento sullo stato del genitore, dato che può essere modificato da un componente figlio.

La soluzione è utilizzare l'interfaccia eventi personalizzata di Vue

L'interfaccia degli eventi implementata da Vue consente di comunicare su e giù per l'albero dei componenti. Sfruttando l'interfaccia personalizzata degli eventi puoi accedere a quattro metodi:

1. $on() - ti consente di dichiarare un listener sulla tua istanza Vue con cui ascoltare gli eventi
2. $emit() - consente di attivare eventi sulla stessa istanza (self)

Esempio utilizzando $on()e $emit():

const events = new Vue({}),
    parentComponent = new Vue({
      el: '#parent',
      ready() {
        events.$on('eventGreet', () => {
          this.parentMsg = `I heard the greeting event from Child component ${++this.counter} times..`;
        });
      },
      data: {
        parentMsg: 'I am listening for an event..',
        counter: 0
      }
    }),
    childComponent = new Vue({
      el: '#child',
      methods: {
      greet: function () {
        events.$emit('eventGreet');
        this.childMsg = `I am firing greeting event ${++this.counter} times..`;
      }
    },
    data: {
      childMsg: 'I am getting ready to fire an event.',
      counter: 0
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>

<div id="parent">
  <h2>Parent Component</h2>
  <p>{{parentMsg}}</p>
</div>

<div id="child">
  <h2>Child Component</h2>
  <p>{{childMsg}}</p>
  <button v-on:click="greet">Greet</button>
</div>

Risposta presa dal post originale: Comunicazione tra i componenti in VueJS

Ref e event bus hanno entrambi problemi quando il rendering del controllo è influenzato da v-if. Quindi, ho deciso di utilizzare un metodo più semplice.

L'idea è usare un array come coda per inviare metodi che devono essere chiamati al componente figlio. Una volta che il componente è stato montato, elaborerà questa coda. Controlla la coda per eseguire nuovi metodi.

(Prendendo in prestito un codice dalla risposta di Desmond Lua)

Codice componente genitore:

import ChildComponent from './components/ChildComponent'

new Vue({
  el: '#app',
  data: {
    item: {},
    childMethodsQueue: [],
  },
  template: `
  <div>
     <ChildComponent :item="item" :methods-queue="childMethodsQueue" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.childMethodsQueue.push({name: ChildComponent.methods.save.name, params: {}})
    }
  },
  components: { ChildComponent },
})

Questo è il codice per ChildComponent

<template>
 ...
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    methodsQueue: { type: Array },
  },
  watch: {
    methodsQueue: function () {
      this.processMethodsQueue()
    },
  },
  mounted() {
    this.processMethodsQueue()
  },
  methods: {
    save() {
        console.log("Child saved...")
    },
    processMethodsQueue() {
      if (!this.methodsQueue) return
      let len = this.methodsQueue.length
      for (let i = 0; i < len; i++) {
        let method = this.methodsQueue.shift()
        this[method.name](method.params)
      }
    },
  },
}
</script>

E c'è molto spazio per migliorare come passare processMethodsQueuea un mixin ...

Per comunicare un componente figlio con un altro componente figlio ho creato un metodo in parent che chiama un metodo in un bambino con:

this.$refs.childMethod()

E da un altro bambino ho chiamato il metodo di root:

this.$root.theRootMethod()

Ha funzionato per me.