부모 및 손자녀 간의 동기화 수식자 Vue 2 사용

부모 및 손자녀 간의 동기화 수식자 Vue 2 사용

문제

다음과 같은 vue 컴포넌트가 있다고 칩시다.

주의: 모든 vue 컴포넌트는 간략화되어 있습니다.

resuable-comp.표시하다

<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>

부모 컴포넌트에서는 다음과 같은 작업을 수행합니다.

보조양식표시하다

<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_module을 클릭합니다.표시하다

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

질문.

resuable-comp 간의 값을 동기화하려면 어떻게 해야 합니까?vue, 보조양식vue 및 page_discloss.표시하다

재사용 가능한 컴포넌트를 사용하고 있습니다.vue는 많은 다른 장소입니다.보조양식을 사용하고 있습니다.page_view에서 몇 번만 볼 수 있습니다.표시하다

그리고 저는 이 패턴을 여러 번 사용하려고 합니다.하지만 난 이걸 제대로 할 수 없을 것 같아.위의 오류는 다음과 같습니다.

상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변형되는 프로펠러: "numA"

좋아, 효과가 있는 해결책을 찾았어.

보조양식으로.vue, 변경:

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

이제 작업할 수 있는 반응형 데이터가 있습니다.다음으로 템플릿에서는 프로포트가 아닌 반응형 데이터를 참조합니다.

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

마지막으로 워처를 추가하여 반응 데이터가 변경되었는지 확인한 후 부모에게 다음과 같이 전송합니다.

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

이제 손자부터 부모까지 모든 값이 동기화됩니다.

---

갱신(2018년 4월 13일)

resuable-comp에 새로운 변경을 가했습니다.vue:

• 'setValue'를 'value'로 치환했습니다.
• 'update:value'라고 표시된 부분을 'input'으로 대체했습니다.

다른 건 다 똑같아

그럼 보조양식으로.vue:

• ':setValue.sync'를 'v-model'로 대체했습니다.

v-model은 양방향 바인딩이기 때문에 필요한 곳에 활용했습니다.부모-자녀가 아닌 부모-자녀 간의 동기에서는 전달해야 할 소품이 많기 때문에 여전히 동기 수식자가 사용됩니다.이걸 수정해서 소품들을 하나의 오브젝트로 묶어서 그냥 넘길 수 있어요.

언급URL : https://stackoverflow.com/questions/49806121/using-sync-modifier-between-parent-and-grandchildren-vue-2