vue 2 parent get children component data

Question

I'm using vue2 to develop my project.

When the component mounts (or beforeMounts), it fetches initial data from vuex, and put it to component's data. After the user clicks the button, it triggers the parent's method. I need to get the child's data. How to get it?

the parent component have the handle methods which callbacks from the child component. the child component has the child2 component which has the data the parent component needs.

in html like:

<parent>
  <child>
    <child2></child2>
  </chlid>
</parent>

I need to handle child2's data in parent's method. And the parent's handle method is the child's callback method.

Answer 1

You can use $emit to call parent's method from child component and pass the variable you want to pass to parent's method.

Have a look at this answer for more details.

Answer 2

Since you are using Vuex just make the children do actions that change the state, and make the parent react to such changes by using getters. More info about the last thing here: https://vuex.vuejs.org/en/getters.html

Answer 3

Finally I just move the data from child to parent. Make the child pure and it works. Thanks for your help.

Answer 4

Can u try it like this way:

parent component:

<child @childReady="do()"></child>

export default {
    methods: {
        do() {
        }
    }    
}

child component:

mounted() {
    this.$emit('childReady');
}