每次在另一个组件上输入时,Vue prop验证都会执行

Question

我有一个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",当我点击时,"Emiting input"仅显示在控制台上.

Vue是否在每次输入事件中一次又一次地验证道具？它不太可能,所以我在这里做错了什么？

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

Answer 1

这是完全正常的，你没有做错任何事。每当组件重新渲染（例如 prop 更改时）时，都会触发 Prop 验证。

v-model在组件上使用时，每当您发出input事件时，组件都会重新渲染，因为它有效地更新了valueprop。组件本身不会更新valueprop，而是更新它的父组件。因为v-model或多或少是 的简写:value="value" @input="value = $event"。因此组件重新渲染并触发验证。

您不应该担心它，我认为您不需要，validator因为您的组件可能总是发出有效值。