다른 컴포넌트에 입력이 있을 때마다 Vue Prop 검증이 실행됨

다른 컴포넌트에 입력이 있을 때마다 Vue Prop 검증이 실행됨

Vue 컴포넌트는 다음과 같습니다.

<template>
<div>
    <div class="sel-square"
        @click="selectGender('Male')"
        :class="{ active : value === 'Male'}">
    <div class="sel-square__img">
        <img src="~Img/lp_v1/fam-male.png"
            alt="male" />
    </div>
    <div class="sel-square__caption">
        Male
    </div>
    </div>

    <div class="sel-square"
    @click="selectGender('Female')"
    :class="{ active : value === 'Female'}">
    <div class="sel-square__img">
        <img src="~Img/lp_v1/fam-female.png"
            alt="female" />
    </div>
    <div class="sel-square__caption">
        Female
    </div>
    </div>
</div>
</template>

<script>
export default {
props : { 
    value: {
    type: String,
    required: true,
    validator: (value) => {
        console.log("Validating", value)
        return ['Male', 'Female'].includes(value)
    }   
    }   
},  
methods :{
    selectGender(gender) {
    console.log("Emiting input", gender)
    this.$emit('input', gender)
    }   
}   
}   
</script>

제 메인 앱에서는 다음과 같이 사용하고 있습니다.

<GenderSelector v-model="gender"></GenderSelector>

제가 직면한 문제는 '검증기'가 처음 페이지를 새로 고쳤을 때 3~4회 실행되며, 그 후에는 같은 페이지에 있는 다른 입력 요소에서 키를 누를 때마다 계속 실행됩니다.참고로 콘솔 출력에 "Validating Male"이 계속 표시되고 "Emitting input"이 콘솔에 표시되는 것은 클릭 시뿐입니다.

Vue는 입력 이벤트마다 소품 검증을 반복하고 있습니까?그럴 것 같진 않은데, 내가 뭘 잘못하고 있는 거지?

JSFiddle:https://jsfiddle.net/eywraw8t/5090/

그건 지극히 정상이에요, 당신은 잘못한 게 없어요.프로펠러 검증은 프로펠이 변경될 때와 같이 컴포넌트가 재렌더될 때마다 트리거됩니다.

사용시v-model컴포넌트에서는, 항상input이벤트, 컴포넌트가 효과적으로 업데이트되기 때문에 컴포넌트가 재실행됩니다.value이 컴포넌트 자체는 이 컴포넌트를 업데이트하지 않습니다.value소품이지만 오히려 부모이기 때문입니다.v-model의 줄임말이다:value="value" @input="value = $event"컴포넌트가 재렌더되어 검증이 개시됩니다.

걱정할 필요 없어, 내 생각엔 넌 그런 거 필요 없어validator컴포넌트가 항상 유효한 값을 방출할 가능성이 높기 때문입니다.

언급URL : https://stackoverflow.com/questions/49590592/vue-prop-validation-getting-executed-every-time-there-is-input-on-another-compon