VueJS access children's component's data from parent
j'utilise le vue-cli échafaudage pour webpack
Ma Vue component/structure de la hiérarchie ressemble actuellement le suivant:
- App
- Gabarit PDF
- Background
- Modèle Dynamique De L'Image
- Modèle Statique De L'Image
- Markdown
- Gabarit PDF
au niveau de l'application, je veux une méthode VueJS component qui peut regrouper tous les les données du composant enfant dans un seul objet JSON qui peut être envoyé au serveur.
y a-t-il un moyen d'accéder aux données de child component? En particulier, plusieurs couches profondes?
si ce n'est pas le cas, quelle est la meilleure pratique pour transmettre des données/paramètres oberservables, de sorte que quand il est modifié par des composants enfants j'ai accès aux nouvelles valeurs? J'essaie d'éviter les dépendances entre les composants, donc à partir de maintenant, la seule chose qui est passée en utilisant attributs du composant 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:
2 réponses
Pour ce genre de structure, Il est bon d'avoir une sorte de Magasin.
VueJS fournir une solution pour cela, 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 partout, avec importer ce fichier de stockage
HomeView.vue
import MarkdownStore from '../stores/MarkdownStore'
export default {
data() {
sharedItems: MarkdownStore.data
},
created() {
MarkdownStore.fetchData()
}
}
donc c'est le flux de base que vous pouvez utiliser, Si vous ne voulez aller avec Vuex.
Quelle est la meilleure pratique pour transmettre des données/paramètres oberservables, de sorte que lorsqu'ils sont modifiés par des composants enfants, j'ai accès aux 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. Comme @Belmin l'a dit, vous pouvez même utiliser un simple objet JavaScript pour cela, grâce à la réactivité système.
une autre solution consiste à utiliser des événements. Vue a déjà implémenté L'interface EventEmitter, un enfant peut utiliser this.$emit('eventName', data) pour communiquer avec son parent.
Le parent va écouter l'évènement comme ceci: (@update est le raccourci de v-on:update)
<child :value="value" @update="onChildUpdate" />
et mettre à jour les données dans le gestionnaire d'événement:
methods: {
onChildUpdate (newValue) {
this.value = newValue
}
}
voici un exemple simple d'événements personnalisés dans Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010
il s'agit simplement de la communication parent-enfant, si un composant a besoin de parler à ses frères et sœurs, alors vous aurez besoin d'un bus d'événements global, en Vue.js, tu peux juste utiliser une instance d'Evi vide:
const bus = new Vue()
// In component A
bus.$on('somethingUpdated', data => { ... })
// In component B
bus.$emit('somethingUpdated', newData)