Jak uzyskać dostęp do metody potomnej od rodzica w vue.js

Mam dwa zagnieżdżone komponenty, jaki jest właściwy sposób dostępu do metod potomnych od rodzica?

this.$children[0].myMethod() wydaje się działać, ale jest dość brzydki, prawda, co może być lepszego:

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

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

Możesz użyć ref .

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

Jeśli nie lubisz ścisłego połączenia, możesz użyć Event Bus, jak pokazano na @Yosvel Quintero. Poniżej znajduje się kolejny przykład wykorzystania magistrali zdarzeń przez przekazanie jej jako rekwizytów.

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

Kod elementu.

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

Komunikacja rodzic-dziecko w VueJS

Biorąc pod uwagę, że instancja root Vue jest dostępna dla wszystkich potomków za pośrednictwem this.$root, komponent nadrzędny może uzyskać dostęp do komponentów potomnych za pośrednictwem this.$childrentablicy, a komponent potomny może uzyskać dostęp do swojego rodzica za pośrednictwem this.$parent, twoim pierwszym odruchem może być bezpośredni dostęp do tych komponentów.

Dokumentacja VueJS ostrzega przed tym konkretnie z dwóch bardzo dobrych powodów:

• Ściśle łączy rodzica z dzieckiem (i odwrotnie)
• Nie możesz polegać na stanie rodzica, biorąc pod uwagę, że może on być modyfikowany przez składnik potomny.

Rozwiązaniem jest użycie niestandardowego interfejsu zdarzeń Vue

Interfejs zdarzeń zaimplementowany przez Vue umożliwia komunikację w górę iw dół drzewa komponentów. Wykorzystanie interfejsu zdarzeń niestandardowych daje dostęp do czterech metod:

1. $on() - pozwala zadeklarować odbiornik w Twojej instancji Vue, za pomocą którego można słuchać zdarzeń
2. $emit() - umożliwia wyzwalanie zdarzeń na tej samej instancji (własnej)

Przykład użycia $on()i $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>

Odpowiedź zaczerpnięta z oryginalnego postu: Komunikacja między komponentami w VueJS

Zarówno magistrala odwołań, jak i magistrala zdarzeń mają problemy, gdy wpływa na renderowanie sterowania v-if. Więc zdecydowałem się na prostszą metodę.

Pomysł polega na użyciu tablicy jako kolejki do wysyłania metod, które muszą zostać wywołane do komponentu potomnego. Po zamontowaniu komponent będzie przetwarzał tę kolejkę. Obserwuje kolejkę do wykonania nowych metod.

(Pożyczenie kodu z odpowiedzi Desmonda Lua)

Kod komponentu nadrzędnego:

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

To jest kod dla 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>

Jest dużo miejsca na ulepszenia, na przykład przejście processMethodsQueuedo miksu ...

Aby komunikować komponent potomny z innym komponentem potomnym, stworzyłem metodę w rodzicu, która wywołuje metodę w dziecku za pomocą:

this.$refs.childMethod()

A od innego dziecka, które nazwałem metodą root:

this.$root.theRootMethod()

U mnie to zadziałało.