每次在另一个组件上有输入时执行Vue属性验证

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次，之后它会在同一页面上的另一个输入元素上每次按键时执行。为了清楚起见，控制台输出一次又一次地显示“验证男性”，而“发射输入”只有在我点击时才会在控制台上显示。

Vue会在每个输入事件上一次又一次地验证属性吗？这不太可能，那么我在这里做错了什么？

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

Answer 1

这是非常正常的，你没有做错什么。每当组件重新呈现时触发属性验证，就像属性更改时一样。

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

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