VueJS access child component's data from parent

Question

I\'m using the vue-cli scaffold for webpack

My Vue component structure/heirarchy currently looks like the following:

• App
  • PDF Template
    <

Answer 1

I am not sure this is a good practice or not.

In my child component, there are no buttons to emit changed data. its a form with somewhat 5~10 inputs. the data will be submitted once you click the process button in another component. so, I can't emit every property when it's changing.

So, what I did,

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

e.g

// js
methods:{
    process: function(){
        // items is defined object inside data()
        var markdowns = this.$refs.markdowndetails.items 
    }
}

Note: If you do this all over the application i suggest move to vuex instead.