VueJS доступа дочернего компонента от родительского

Question

Я использую vue-cli scaffold for webpack

My Вьет структуру компонента/иерархии в настоящее время выглядит следующим образом:

• App
  • PDF Шаблон
    • Фон
    • Динамический шаблон I маг
    • Статическое изображение шаблона
    • уценки

На уровне приложения, я хочу vuejs метод компонента, который может агрегировать все данные дочернего компонента в единый объект JSON, который может быть отправлен на сервер.

Есть ли способ доступа к данным дочернего компонента? В частности, многослойные слои?

Если нет, то какова наилучшая практика для передачи данных или параметров, подлежащих контролю, так что, когда они модифицируются дочерними компонентами, у меня есть доступ к новым значениям? Я пытаюсь избежать жестких зависимостей между компонентами, поэтому прямо сейчас единственное, что передавалось с использованием атрибутов компонента, - значения инициализации.

UPDATE:

Твердые ответы. Ресурсы я нашел полезным после рассмотрения оба ответа:

• VueX and when to use it
• VueX alternative solution for smaller apps

Answer 1

Для такого рода структуры Это хорошо, чтобы иметь какой-то магазин.

VueJS предлагает решение для этого, и это называется Vuex.Если вы не готовы идти с Vuex, вы можете создать свой собственный простой магазин.

Давайте попробуем с этим

MarkdownStore.js

export default { 

data: { 
    items: [] 
}, 

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

fetchData() { 
    // fetch logic 
} 

} 

И теперь вы можете использовать эти данные везде, при импорте этого файла хранилища

HomeView.vue

import MarkdownStore from '../stores/MarkdownStore' 

export default { 

data() { 
    sharedItems: MarkdownStore.data 
}, 

created() { 
    MarkdownStore.fetchData() 
} 

} 

Итак, это основной поток, который вы могли бы использовать. Если вы не хотите идти с Vuex.

Answer 2

Какова наилучшая практика для передачи данных или параметров, подлежащих выполнению, так что, когда они модифицируются дочерними компонентами, у меня есть доступ к новым значениям?

Поток реквизита в один конец вниз, ребенок не должен изменять его реквизиты напрямую.

Для сложного приложения vuex является решением, но для простого случая vuex является излишним. Как и то, что сказал @Belmin, вы даже можете использовать для этого простой объект JavaScript, благодаря системе реактивности.

Другое решение использует события. Vue уже реализовал интерфейс EventEmitter, ребенок может использовать this.$emit('eventName', data) для связи со своим родителем.

Родитель будет слушать на события, как этот: (@update является сокращением от v-on:update)

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

и обновить данные в обработчик событий:

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

Вот простой пример пользовательских событий в Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

Это только родитель-чил d связи, если компонент должен поговорить с его братьями и сестрами, то вы будете нуждаться в глобальной автобус событий, в Vue.js, вы можете просто использовать пустой экземпляр Vue:

const bus = new Vue() 

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

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