VueJS child component data from parent access

Question

I am using Vue-Cli framework for web package

My Vue component structure / hierarchy currently looks like this:

• application
  • Pdf template
    • Background
    • Dynamic Template Image
    • Static Image Template
    • markdown

At the application level, I need a vuejs component method that can combine all the data of the child components into a single JSON object that can be sent to the server.

Is there a way to access the data of child components? In particular, several layers deep?

If not, what is the best practice for passing observable data / parameters so that when they are changed by child components, I have access to new values? I try to avoid hard dependencies between components, so at the moment the only thing that is passed using the component attributes is the initialization values.

UPDATE:

Solid answers. Resources that I found useful after considering both answers:

• Vuex and when to use it
• Vuex is an alternative solution for small applications

Answer 1

For this kind of structure It’s good to have some kind of store.

VueJS provides a solution for this, and it is called Vuex. If you are not ready to work with Vuex, you can create your own simple store.

Try with this

MarkdownStore.js

export default { data: { items: [] }, // Methods that you need, for eg fetching data from server etc. fetchData() { // fetch logic } } 

And now you can use this data everywhere by importing this Store file

Homeview.vue

 import MarkdownStore from '../stores/MarkdownStore' export default { data() { sharedItems: MarkdownStore.data }, created() { MarkdownStore.fetchData() } } 

So, the main thread that you could use, If you do not want to go with Vuex.

Answer 2

What is the best practice for passing returned data / parameters, so that when they are changed by child components, do I have access to the new values?

The flow of props one way down, the child should never change their details directly.

For a complex application, vuex is a solution, but for a simple case, vuex is redundant. Like what @Belmin said, you can even use a simple JavaScript object for this, thanks to the reactivity system.

Another solution is to use events. Vue has already implemented the EventEmitter interface, a child can use this.$emit('eventName', data) to communicate with its parent.

The parent will listen for the event as follows: ( @update is shorthand for v-on:update )

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

and update the data in the event handler:

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

Here is a simple example of custom events in Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

This is only the relationship between parents and children, if the component needs to talk with its siblings, then you need a global event bus, in Vue.js you can just use an empty instance of Vue:

 const bus = new Vue() // In component A bus.$on('somethingUpdated', data => { ... }) // In component B bus.$emit('somethingUpdated', newData) 

Answer 3

I'm not sure if this is a good practice or not.

My child component has no buttons for issuing modified data. This is a form with 5-10 inputs. The data will be sent after you click the process button in another component. therefore, I cannot throw away every property when it changes.

So what I did

In my parent component, I can access the child data from "ref"

eg

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

Note: if you do this throughout the application, I suggest switching to vuex instead.