在父级和子级Vue 2之间使用同步修改器

Question

Problem

Let's say I have a vue component called:

Note: All vue components has been simplified to explain what I'm trying to do.

reusable-comp.vue

<template>
    <div class="input-group input-group-sm">
        <input type="text" :value.number="setValue" class="form-control" @input="$emit('update:setValue', $event.target.value)">
        <span>
            <button @click="incrementCounter()" :disabled="disabled" type="button" class="btn btn-outline-bordercolor btn-number" data-type="plus">
                <i class="fa fa-plus gray7"></i>
            </button>
        </span>
    </div>
</template>
<script>
    import 'font-awesome/css/font-awesome.css';

    export default {
        props: {
            setValue: {
                type: Number,
                required: false,
                default: 0
            }
        },
        data() {
            return {

            }
        },
        methods: {
            incrementCounter: function () {
                this.setValue += 1;
            }
        }
    }
</script>

Then in a parent component I do something like this:

subform.vue

<div class="row mb-1">
    <div class="col-md-6">
        Increment Value of Num A
    </div>
    <div class="col-md-6">
        <reuseable-comp :setValue.sync="numA"></reuseable-comp>
    </div>
</div>
<script>
    import reusableComp from '../reusable-comp'
    export default {
        components: {
            reusableComp 
        },
        props: {
            numA: {
                type: Number,
                required: false,
                default: 0
        }
    },
    data() {
        return {

        }
    }
</script>

then lastly

page_layout.vue

<template>
    <div>
        <subform :numA.sync="data1" />
   </div>
 </template>
 <script>
     import subform from '../subform.vue'
     export default {
         components: {
             subform
     },
     data() {
        return {
            data1: 0
        }
    }
 }
</script>

Question

So, how do I sync a value between reusable-comp.vue, subform.vue, and page_layout.vue

I'm using reuseable-comp.vue is many different places. I'm using subform.vue only a couple times in page_layout.vue

And I'm trying to use this pattern several times. But I can't seem to get this to work. The above gives me an error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "numA"

Answer 1

Okay I found a solution that worked.

In subform.vue, we change:

    data() {
        return {
            numA_data : this.numA
        }
    }

So we now have reactive data to work with. Then in the template, we refer to that reactive data instead of the prop:

<reuseable-comp :setValue.sync="numA_data"></reuseable-comp>

Then finally we add a watcher to check if the reactive data gets changed, and then emit to the parent:

watch: {
    numA_data: function(val) {
         this.$emit('update:numA', this.numA_data);
    }
}

Now all values from grandchildren to parent are synced.

---

Update (4/13/2018)

I made new changes to the reusable-comp.vue:

• I replaced where it says 'setValue' to 'value'
• I replaced where it says 'update:value' to 'input'

Everything else says the same.

Then in subform.vue:

• I replaced ':setValue.sync' to 'v-model'

v-model is two way binding, so I made use of that where it needed to be. The sync between the parent-child (not child to grandchild), is still using sync modifier, only because the parent has many props to pass. I could modify this where I could group up the props as a single object, and just pass that.