VueJS l'accès de l'enfant du composant de données à partir de parent

Question

Je suis à l'aide de la vue-cli échafaudage pour webpack

Ma Vue component/structure de la hiérarchie ressemble actuellement le suivant:

• App
  • Gabarit PDF
    • Arrière-plan
    • Modèle Dynamique De L'Image
    • Modèle Statique De L'Image
    • Markdown

Au niveau application, je veux un vuejs composant de méthode qui peut regrouper tous de l'enfant du composant de données en un seul objet JSON qui peut être envoyé au serveur.

Est-il un moyen d'accès de l'enfant du composant de données? Plus précisément, plusieurs couches de profondeur?

Si non, quelle est la meilleure pratique pour la transmission oberservable de données/paramètres, de sorte que quand il est modifié par les composants enfants, j'ai accès à de nouvelles valeurs? J'essaie d'éviter durs dépendances entre les composants, donc à partir de maintenant, la seule chose transmis à l'aide de la composante attributs sont des valeurs d'initialisation.

Mise à JOUR:

Des réponses solides. Les ressources que j'ai trouvé utile après l'examen de ces deux réponses:

• Vuex et quand l'utiliser
• Vuex solution de rechange pour les applications plus petites

Answer 1

Je ne suis pas sûr que c'est une bonne pratique ou pas.

Dans mon composant enfant, il n'y a pas de boutons pour émettre des données modifiées. ses un formulaire avec un peu de 5~10 entrées. les données doivent être soumises une fois que vous cliquez sur le bouton traiter dans un autre composant. donc, je ne peux pas émettre à chaque propriété quand il est en train de changer.

Donc, ce que j'ai fait,

Dans mon composant parent, je peux accéder à l'enfant les données de "ref"

e.g

<markdown ref="markdowndetails"></markdown>
<app-button @submit="process"></app-button>

// js
methods:{
    process: function(){
        // items is defined object inside data()
        var markdowns = this.$refs.markdowndetails.items 
    }
}

Remarque: Si vous faites cela tous les plus de l'application, j'ai suggèrent le mouvement vuex à la place.

Answer 2

Pour ce type de structure, Il est bon d'avoir une sorte de Magasin.

VueJS fournir une solution pour ça, et Il est appelé Vuex.Si vous n'êtes pas prêt à aller avec Vuex, vous pouvez créer votre propre simple magasin.

Essayez avec cette

MarkdownStore.js

export default {

 data: {
   items: []
 },

 // Methods that you need, for e.g fetching data from server etc.

 fetchData() {
   // fetch logic
 }

}

Et maintenant vous pouvez utiliser ces données de partout, avec de l'importation du fichier de la banque de

HomeView.vue

import MarkdownStore from '../stores/MarkdownStore'

export default {

 data() {
   sharedItems: MarkdownStore.data
 },

 created() {
   MarkdownStore.fetchData()
 }

}

Donc, c'est le débit de base que vous pouvez utiliser, Si vous ne voulez aller avec Vuex.

Answer 3

quelle est la meilleure pratique pour la transmission oberservable de données/paramètres, de sorte que quand il est modifié par les composants enfants, j'ai accès à de nouvelles valeurs?

Le flux des accessoires est un chemin vers le bas, un enfant ne devrait jamais modifier ses accessoires directement.

Pour une application complexe, vuex est la solution, mais pour un cas simple vuex est inutile. Tout comme ce que @Belmin dit, vous pouvez même utiliser un simple objet JavaScript pour que, grâce à la réactivité du système.

Une autre solution est d'utiliser les événements. Vue a déjà mis en œuvre la EventEmitter interface, un enfant peut utiliser this.$emit('eventName', data) de communiquer avec son parent.

Le parent va écouter l'évènement comme ceci: (@update est l'abréviation de l' v-on:update)

<child :value="value" @update="onChildUpdate" />

et mettre à jour les données dans le gestionnaire d'événements:

methods: {
  onChildUpdate (newValue) {
    this.value = newValue
  }
}

Voici un exemple simple d'événements personnalisés en Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

C'est juste de la communication parent-enfant, si un composant doit parler à ses frères et sœurs, alors vous aurez besoin d'un événement mondial de bus, dans Vue.js, vous pouvez simplement utiliser un vide de Vue de l'instance:

const bus = new Vue()

// In component A
bus.$on('somethingUpdated', data => { ... })

// In component B
bus.$emit('somethingUpdated', newData)