Vuejs2 将Vue.js中的验证数据传递到插槽

我刚刚开始使用Vue.js，希望使用vee validator插件，这样我就不必重新发明轮子了。无论您是否使用vee validator，我相信您的Vue向导都会知道如何处理这种情况

为了帮助保持我的代码干净，使updateone-place-update-everywhere的想法成为现实，我正在尝试制作一些定制组件，这些组件只是经过良好样式和包装的HTML输入

在这个简单的例子中，我只有一个TextInput，但想法是遵循相同的格式，但有其他类型的输入、textareas、selects等

我一直在尝试使用Vee Validate的这个示例，但是示例不是很清楚，也不完全是我想要做的。

所以我的主要应用程序是：

<template>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title pull-left">New Post</h3>
                </div>
                <div class="panel-body">

                    <inputWrapper label="My Label" icon="fa-user">
                        <textInput name="test" placeholder="Edit me"></textInput>
                    </inputWrapper>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
            }
        }
</script>

新职位
导出默认值{
数据（）{
返回{
}
}

然后是InputWrapper.vue文件：

<template>
    <div class="form-group" v-bind:class="{ 'has-error': errors.has('email') }">
        <div class="col-md-12">
            <label>{{ label }}</label>
            <div class="input-group">
                <span class="input-group-addon" v-if="icon"><i class="fa fa-lg " v-bind:class="icon"></i></span>
                <slot></slot> <!-- Input element passed from parent -->
            </div>
            <small class="help-block" v-show="errors.has('email')">
                <strong>{{ errors.first('email') }}</strong>
            </small>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['label', 'icon'],

        data(){
            return {
            }
        }
    }
</script>

{{label}}
{{errors.first（'email'）}}
导出默认值{
道具：[“标签”，“图标”]，
数据（）{
返回{
}
}
}

和我的TextInput.vue：

<template>
    <input 
        v-bind:id="name"
        v-bind:name="name"
        v-bind:placeholder="placeholder"

        v-on:keyup="onInput"

        class="form-control" />
</template>

<script>
    export default {
        props: ['name', 'placeholder', 'type'],

        data(){
            return {
            }
        },

        methods: {
            onInput(e) {
                const value = e.target.value;
                this.$emit('input', value);
            }
        }
    }
</script>

导出默认值{
道具：['name'，'placeholder'，'type']，
数据（）{
返回{
}
},
方法：{
输入（e）{
常量值=e.target.value；
这是。$emit（'input'，value）；
}
}
}

我一直在修改TextInput.vue中的onInput（）方法，但不确定这是我真正应该做的

请注意，InputWrapper.vue文件有“errors”errorBag，但它没有显示错误。我认为这是因为errors.has（）和errors.first（）与正在验证的组件不在同一个组件中

如何让InputWrapper显示来自自定义TextInput组件的错误

---

我添加了v-validate=“'required | email'”在主应用程序中调用自定义组件时没有运气，也在TextInput.vue文件中尝试了它，但没有运气。不幸的是，vee validator上的文档没有准确描述数据vv值路径的真实内容，因此我不知道应该在其中输入什么值。

我认为您的文本输入名称应该是'email'而不是'of‘测试’：

    <textInput name="email" placeholder="Edit me"></textInput>

因为这是您在InputWrapper.vue中查找的错误：

    <div class="form-group" v-bind:class="{ 'has-error': errors.has('email') }">

正如文件所说

该插件使用一个私有验证器对象和一个公共错误数据对象来扩充Vue实例

---

所有组件都应该可以访问同一对象。

您可以尝试将主应用程序

$validator

注入子组件

InputWrapper.vue

和

TextInput.vue

：

export default {
  inject: ['$validator']
}

…但插槽不是，如果注入不起作用，您可能必须使用事件总线实例：

const bus = new Vue({})
// ...
bus.$emit('value_changed', newValue)
// ...
bus.$on('value_changed', (value) => {
  // do something
})

---

我愿意接受关于其他预先存在的验证器的建议，或者选择做我自己的验证器，如果这将使我的生活更容易。