VueJS - access updated child component's data from parent

Question

I'm using vue-cordova-webpack ( https://github.com/OnsenUI/vue-cordova-webpack ) template project with Onsen UI framework.

I have a child component that I call from parent like this:

<template>
   <!-- ... -->
   <child :value1="value1" 
          :value2="value2">
   </child>
   <!-- ... -->
</template>

in the child component I have:

<template>
   <!-- ... -->
   <v-ons-search-input v-model="mutableValue1"> </v-ons-search-input>

   <v-ons-checkbox v-model="mutableValue2"> </v-ons-checkbox>
   <!-- ... -->
</template>

export default {
    props: ['value1', 'value2'],

    name: 'child',
    data() {
      return {
        mutableValue1: this.value1,
        mutableValue2: this.value2,
      };
    }
};

now, as you can see, the mutableValue1 and mutableValue2 variables are updated when user changes values of <v-ons-search-input> and <v-ons-checkbox> components.

(I introduced those mutableValue1 and mutableValue2 variables in order to avoid [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders... warning)

I need that values in parent view. At the moment I don't have those values updated when accessing this.value1 and this.value2 in parent view.

How can I do that?

Thanks

Answer 1

You have several options here. First, you can access all child props using reference:

// parent-component.vue
<template>
    <child :value1="value1" 
           :value2="value2"
           ref="my-child">
    </child>
</template>

<script>
export default () {
     name: 'parent component',
     methods: {
         getChildProps() {
             console.log(this.$refs['my-child'].mutableValue1); // outputs mutableValue
         },
     },
};
<script>

Second option is to emit an event from child component when changes occur. Then listen for it at the parent component:

// parent-component.vue
<template>
    <child :value1="value1" 
           :value2="value2"
           @change=doSomething>
    </child>
</template>

<script>
export default () {
     name: 'parent component',
     methods: {
         doSomething(payload) {
             console.log(payload); // outputs mutableValue
         },
     },
};
<script>

// child-component.vue

<template>
    <v-ons-search-input v-model="mutableValue1"></v-ons-search-input>
</template>

<script>
export default {
    props: ['value1', 'value2'],
    name: 'child',
    data() {
        return {
            mutableValue1: this.value1,
        };
    };
    watch: {
        mutableValue1(val) {
            this.$emit('change', mutableValue1);
        },
    },
};
</script>

Here is an example of the second option.