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

Я использую каркас Vue-Cli для веб-пакета

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

Приложение
- PDF шаблон
  - Фон
  - Динамическое шаблонное изображение
  - Статическое изображение шаблона
  - уценка

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

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

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

ОБНОВИТЬ:

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

Ответы

Ответ 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
 }

}

И теперь вы можете использовать эти данные повсюду, импортируя этот файл Store

HomeView.vue

import MarkdownStore from '../stores/MarkdownStore'

export default {

 data() {
   sharedItems: MarkdownStore.data
 },

 created() {
   MarkdownStore.fetchData()
 }

}

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

Ответ 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

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

const bus = new Vue()

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

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

Ответ 3

Я не уверен, что это хорошая практика или нет.

В моем дочернем компоненте нет кнопок для выдачи измененных данных. это форма с 5-10 входами. данные будут отправлены после того, как вы нажмете кнопку процесса в другом компоненте. поэтому я не могу выбрасывать каждое свойство при его изменении.

Итак, что я сделал,

В моем родительском компоненте я могу получить доступ к дочерним данным из "ref"

например

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

Примечание: если вы делаете это по всему приложению, я предлагаю вместо этого перейти на vuex.