Как из родительского компонента сконфигурировать компонент ввода?

Question

[Артем]

Мне нужен компонент input из bootstrap 3, реализующий логику валидации и отображения ошибок.

Иду к этому следующим образом:

<template>
    <div>
        <div class="form-group" v-bind:class="{'has-error': error}">
            <input
                    class="form-control"
                    v-bind:placeholder="placeholder"
                    v-model="value"
                    @change="$emit('value:update', $event.target.value)"
            />
            <div class="help-block" v-if="error">
                {{error}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        placeholder: {
            type: String,
            required: true
        },
    },
    data() {
        return {
            value: null,
            error: null
        }
    }
}

</script>

Проблема: у меня нет способа передать из родителя в инстанс компонента описание процедуры валидации, будь это объект или анонимная функция.
Также хотелось бы иметь возможность каким-либо образом отменить передачу значения, не прошедшего валидацию наверх.

Подскажите, пожалуйста, куда копать.

Answer 1

[0xD34F]

у меня нет способа передать из родителя в инстанс компонента описание процедуры валидации

Да неужели? А параметры на что?

хотелось бы иметь возможность каким-либо образом отменить передачу значения, не прошедшего валидацию наверх

Ну так вы не тупо делайте emit, а при условии отсутствия ошибок.

UPD. https://jsfiddle.net/369saL08/