How to configure an input component from a parent component?

Question

JavaScript

I need an input component from bootstrap 3 that implements validation and error display logic.
I go about it like this:

<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>

Problem: I have no way to pass a description of the validation procedure from the parent to the component instance, be it an object or an anonymous function.
I would also like to be able to somehow cancel the transfer of a value that has not passed validation upstairs.
Tell me, please, where to dig.

Answer 1

I have no way to pass the description of the validation procedure from the parent to the component instance

Oh really? What are the settings for?

I would like to be able to somehow cancel the transfer of a value that has not passed validation to the top

Well, do not stupidly do emit, but provided there are no errors.
UPD. https://jsfiddle.net/369saL08/