时间戳

首页 > 解决方案 > 如何在 Vue 2 中创建具有验证功能的 VForm 组件，如 Vuetify？

vue.js - 如何在 Vue 2 中创建具有验证功能的 VForm 组件，如 Vuetify？

问题描述

在 Vuetify 中，您可以设置如下代码，VForm组件可以自动检查其中的所有输入VForm是否有效，而无需来回传递任何道具。如何在 Vue 2 中为我自己的表单和输入组件实现此功能？

<template>
  <v-form v-model="formIsValid">
    <v-text-field :rules="[required]"></v-text-field>
  </v-form>
</template>

<script>
  data() {
    return {
      formIsValid: false
    }
  },
  methods: {
    required(val) {
      return !!val || 'Required.'
    }
  }
</script>

标签： vue.jsvuejs2vuetify.js

解决方案

您可以探索 vuetify 源代码以了解他们是如何做到这一点的。
首先，你要了解提供/注入，https:
//vuejs.org/v2/api/#provide-inject 他们的概念非常简化的版本如下所示，

VForm.vue

export default {
  data() {
    return {
      inputs: []
    }
  },
  provide () {
    // provide this Form component for child, so child can register itself
    return { form: this }
  },
  methods: {
    register(input) {
      this.inputs.push(input);
    },
    validate() {
      // loop through child registered inputs,
      // run every child.validate() to validate all child
      this.inputs.forEach(input => {
        input.validate();
      });
    }
  }
}

VInput.vue

export default {
  props: {
    rules: {
      default: () => [],
      type: Array
    }
  },
  // inject parent VForm component
  inject: ['form'],
  created() {
    // with inject above, you can use this.form to reference parent VForm
    this.form.register(this);
  },
  methods: {
    validate() {
      // use rules to validate input
    }
  }
}

使用
v-form 提供的任何东西都可以在 v-input 中与注入一起使用。

<template>
  <v-form>
    <v-input :rules="rules"/>
  <v-form/>
</template>

大部分逻辑都在这些文件中，而 vuetify 所做的远比上面的逻辑要多。学习研究开源代码，开源项目很棒。

  1. VForm：https ://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VForm/VForm.ts
  2. VForm 使用的可注册 mixin： https ://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/registrable/index.ts
  3. VInput：https ://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VInput/VInput.ts
  4. VInput 使用的可验证 mixin：https ://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/validatable/index.ts

推荐阅读