VueJS l'accès de l'enfant du composant de données à partir de parent
Je suis en utilisant le vue-cli échafaudage pour webpack
Ma Vue component/structure de la hiérarchie ressemble actuellement le suivant:
- App
- Gabarit PDF
- Fond
- Modèle Dynamique De L'Image
- Modèle Statique De L'Image
- Markdown
- Gabarit PDF
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:
Vous devez vous connecter pour publier un commentaire.
Pour ce genre 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.
Essayons avec cette
MarkdownStore.js
Et maintenant vous pouvez utiliser ces données de partout, avec de l'importation du fichier de la banque de
HomeView.vue
De sorte que le flux de base que vous pouvez utiliser, Si vous ne voulez aller avec Vuex.
this.items
, à partir de votre composant.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 dev-on:update
)et mettre à jour les données dans le gestionnaire d'événement:
Voici un exemple simple d'événements personnalisés en Vue de:
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:
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
Remarque: Si vous faites cela tous les plus de l'application, j'ai suggèrent le mouvement vuex à la place.