Comment accéder à un enfant de la méthode de la mère dans vue.js

J'ai deux composants imbriqués, ce est la bonne façon de l'accès à l'enfant des méthodes de la mère ?

this.$children[0].myMethod() semble faire l'affaire, mais il est assez laid, n'est-ce pas, que peut-être une meilleure façon:

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

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

Tout d'abord, demandez-vous avez-vous vraiment besoin de. Si votre état de la page est dans un magasin, comme il se doit, il n'est pas nécessaire pour la communication parent-enfant.
L'état est différente des événements. C'est précisément à propos du déclenchement de l'enfant les événements du parent. Vous pouvez aussi faire ce que vous seriez à l'aide de Vuex par le passage d'un accessoire en aval, mais cela nécessite que l'enfant composant montres de la prop/store pour les changements de sorte que vous émuler RPC avec les modifications de données qui est tout simplement faux quand tout ce que vous voulez, c'est de déclencher une action dans le composant.
...ou, plus simplement. Cette question pourrait être reformulée comme "Où sont les pédales sur cette belle ferrari je viens de télécharger?" À laquelle la seule réponse sensée est *Vous ne pédale pas une ferrari" 🙂
Oh, c'est gentil. Rabaisser enveloppé comme des conseils, comment très. Je vois que vous aimez aussi en supposant que des trucs sur les gens. Malheureusement, vous n'êtes toujours pas d'offrir quelque chose qui serait de l'affichage réel de l'expérience dans l'abstraction, ni la mise en œuvre de la gestion des événements dans ce contexte. Qui est dans le cas général stil une part à l'état. Les événements peuvent être éphémère, et totalement orthogonal à l'état, et, à cet effet, il est encore totalement hors de propos où l'état est et comment elle est traitée.

OriginalL'auteur al3x | 2016-12-04

javascript vue.js

Vous pouvez utiliser 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 },
})

Si vous n'aimez pas le couplage, vous pouvez utiliser Bus D'Événement comme indiqué par @Yosvel Quintero. Ci-dessous est un autre exemple de l'utilisation de l'événement bus en passant dans le bus comme accessoires.

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

Code du composant.

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

C'est la meilleure réponse.
Cette réponse est la bonne, que réellement lu la question. La réponse sélectionnée répond vraiment à l'opposé question (comment déclencher une méthode sur le parent de l'enfant).
Le lien pour Event Bus que cette réponse est la liaison, est une redirection vers Etat, après la lecture de @bbsimonbb comment, son un peu du sens.

OriginalL'auteur Desmond Lua

Vous devez vous connecter pour publier un commentaire.