Vue.js: 'prop' 변경에 따라 'data'를 다시 계산하고 다시 렌더링하십시오.이게 더 좋은 방법인가?

Vue.js: 'prop' 변경에 따라 'data'를 다시 계산하고 다시 렌더링하십시오.이게 더 좋은 방법인가?

나는 데이터의 어떤 가치에 대해 2방향 데이터 바인딩이 있는 구성요소를 가지고 있다.예를 들면 다음과 같다.

Vue.component ({
    data: ()=>({
        destinationValue: "1000"
    }),
    template: '<input v-model="destinationValue">'
})

이제 이 구성 요소가 destinationValue라는 소인을 받고 여기서 destinationValue를 계산한다고 가정합시다.예를 들어, 변환 비율이 2와 같다면, 나는 다음과 같은 것을 할 수 있다.

Vue.component ({
    props: ['originValue'],
    data: () => ({
        destinationValue: this.originValue* 2
    }),
    template: '<input v-model="destinationValue">'
})

여기서 문제는 이 구성 요소가 originValue 프로펠러에 대한 새 값을 수신할 경우 destinationValue 값이 업데이트되지 않는다는 것이다.

나는 <입력> 태그에서 destinationValue를 업데이트할 수 있어야 하지만 구성 요소가 새로운 originValue를 수신할 때마다 덮어써야 한다.

이를 해결하기 위해 처음에는 다음과 같이 노력했다.

Vue.component ({
    props: ['originValue'],
    data: ()=>({
        destinationValue: this.originValue* 2
    }),
    watch: {
        originValue: function ( val, oldVal ) {
            this.destinationValue= val * 2
        }
    }
    template: '<input v-model="destinationValue">'
})

하지만 이것은 효과가 없을 것이다.originValue에 대한 새 값이 수신되면 템플릿에서 값이 업데이트되지 않는다.감시자 기능 내부의 destinationValue의 긴급 재할당은 그 키의 반응성을 깨는 것에 대한 Vue의 내부 관측자들을 덮어쓸 것이기 때문이다.

내 해결책은 다음과 같다.

Vue.component ({
    props: ['originValue'],
    data: ()=>({
        destinationValue: {
            auxiliarKey: this.originValue* 2
        }
    }),
    watch: {
        originValue: function ( val, oldVal ) {
            this.destinationValue.auxiliarKey = val
        }
    }
    template: '<input v-model="destinationValue.auxiliarKey">'
})

여기서 내가 한 것은 destinationValue를 결과값을 보유하기 위해 안에 anuxiousKey가 있는 객체로 만든 다음 originValue propp에 대한 watcher 함수의 하위 키만 수정하는 것이다.이것은 내 감시자의 기능이 그 안의 보조키를 덮어쓸 때 DestinationValue 키에 대한 Vue의 내부 감시자들이 보존되기 때문이다.

2방향 데이터 바인딩(v-model)이 데이터에서만 계산된 속성에서 작동하지 않는 것 같아 계산된 속성을 사용할 수 없었다.

더 깨끗한 방법이 있는지 아십니까?AuxiliarKey 하위 키를 만들도록 강제하지 않는 옵션?

Ty 미리.

계산된 속성을 사용하십시오.

Vue.component ("x-two", {
    props: ['originValue'],
    computed: {
        destinationValue(){
            return this.originValue * 2;
        }
    },
    template: '<span>{{destinationValue}}</span>'
})

의견/편집 후

내가 이해하기로는, 당신은 당신의 사용자 정의 구성요소에v-model.v-model을 위한 설탕일 뿐이다.:value="myValue"그리고@input="myValue = $event". 구성 요소가 v-model을 지원할 수 있도록 하려면 이 두 가지 사항을 구현하십시오.

Vue.component ("x-two", {
    props: ['originValue', 'value'],
    computed: {
        destinationValue(){
            const newValue = this.originValue * 2;
            this.$emit('input',newValue);
            return newValue;
        }
    },
    template: '<span>{{destinationValue}}</span>'
})

그런 다음 상위 템플릿에서 다음을 수행하십시오.

<x-two :origin-value="count" v-model="calculatedCount"></x-two>

어디에calculatedCount부모에 대한 데이터 값.

작업 예시.

언급하자면, 최신 버전의 Vue는 (오늘부로) 그 속성과 이벤트를 사용자 정의한다는 개념을 추가했다.v-model에 묶어서, 당신이 다른 것을 사용할 수 있도록.value재산과 재산input사건의

참조URL: https://stackoverflow.com/questions/42522578/vue-js-recalculate-and-re-render-data-based-on-prop-change-is-this-the-bet