在父級和子級Vue 2之間使用同步修改器

Question

問題

假設我有一個名為vue的組件：

注意：所有vue組件均已簡化，以解釋我要執行的操作。

可重復使用的，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>

然后在父組件中執行以下操作：

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>

然后最后

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>

題

因此，如何在reusable-comp.vue，subform.vue和page_layout.vue之間同步值

我使用的reuseable-comp.vue有很多不同的地方。 我在page_layout.vue中只使用了subform.vue幾次

我試圖多次使用此模式。 但是我似乎無法使它正常工作。 上面給我一個錯誤：

避免直接更改prop，因為每當父組件重新渲染時，該值都會被覆蓋。 而是使用基於屬性值的數據或計算屬性。 道具被突變：“ numA”

Answer 1

好吧，我找到了一個可行的解決方案。

在subform.vue中，我們更改：

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

因此，我們現在可以使用反應性數據。 然后在模板中，我們引用該反應性數據而不是prop：

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

最后，我們添加一個觀察器，以檢查反應性數據是否被更改，然后發送給父級：

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

現在，從孫輩到父母的所有值都已同步。

---

更新（4/13/2018）

我對reusable-comp.vue進行了新更改：

• 我將顯示“ setValue”的位置替換為“ value”
• 我將顯示“ update：value”的地方替換為“ input”

其他一切都一樣。

然后在subform.vue中：

• 我將'：setValue.sync'替換為'v-model'

v模型是兩種方式的綁定，因此我在需要的地方使用了它。 父子（不是子到子）之間的同步仍在使用sync修飾符，只是因為父有很多道具要傳遞。 我可以在將道具分組為單個對象的地方進行修改，並通過它。