在Vue 3中使用v-model来构建复杂表单的方法

前端小工
908 阅读6分钟

在这篇文章中，我们将介绍Vue 3中v-model 指令的变化。然后，我们将通过一个教程，演示如何使用多个v-model 绑定来简化Vue中复杂表单的构建过程。

跳到前面。

什么是v-model 指令？

Vuev-model 指令可以对表单输入元素进行双向数据绑定，例如任何Vue组件上的input 元素、textarea 元素和select 元素。

它以两种方式处理数据更新。

  • 当输入的值发生变化时，v-model 将该值反映到组件内的状态上
  • 当组件的状态发生变化时，v-model 将这些变化反映到表单输入元素上。

v-model 指令默认为不同的输入元素使用不同的属性并发出不同的事件。

  • value text 和 元素的属性和 事件textarea input
  • checked 复选框和单选按钮的属性和 事件change
  • 选择字段的值作为一个道具和change 事件

在一个自定义组件中，一个简单的输入元素将看起来像这样。

<input
    type="text"
    :value="modelValue"
    @input="$emit(update:modelValue, $event.target.value)"
>

而它的道具将被这样定义。

props: {
        modelValue: {
            type: String,
            default: '',
            required: true
        }
}

在父组件中，自定义组件将被这样使用。

<CustomComponent v-model:modelValue="name" />

// or the shorthand

<CustomComponent v-model="name" />

在自定义组件中，v-model 指令假定已经定义了一个内部属性，名称为modelValue ，并发出一个名为update:modelValue 的单一事件。

你并不局限于默认的命名规则；你可以使用你选择的不同的名字。为我们的v-model bindings ，有了描述性的名字，我们就可以在试图阅读和定义哪些属性附加到父组件时使用更少的代码。

只要确保在选择命名属性时保持一致就可以了。下面是一个自定义名称的例子，fullName ，用于modelValue 属性。

<input
    type="text"
    :value="fullName"
    @input="$emit(update:fullName, $event.target.value)"
>

props: {
        fullName: {
            type: String,
            default: '',
            required: true
        }
}

<CustomComponent v-model:fullName="fullName" />

// or the shorthand

<CustomComponent v-model="fullName" />

v-model 如何处理数据绑定？

v-model指令有三个可用于数据绑定的修饰语。.lazy, .number, , 和.trim 。让我们仔细看看。

.lazy

默认情况下，v-model ，在每个输入事件发出后与Vue实例的状态同步。但是通过.lazy 修改器，v-model 允许在每个变化事件后发生同步。

下面是一个显示使用.lazy 修改器的例子。

<input v-model.lazy="message" />

.number

另一方面，.number 修饰符允许我们将用户输入的内容自动转换为数字。一个HTML输入的默认值总是一个字符串，所以这个修饰符可以起到很大的作用。如果该值不能被解析为数字，则会返回原始值。

下面是一个显示使用.number 修饰符的例子。

<input v-model.number="numPapayas" type="number" />

.trim

.trim 修饰符，顾名思义，自动修饰用户输入的空白。

下面是一个使用.trim 修饰符的例子。

<input v-model.trim="message" />

Vue.js 3中的v-model 与Vue.js 2有什么不同？

如果你熟悉Vue 2中v-model指令的使用，你就会明白它在创建表单方面是多么复杂。

在Vue 2中，我们只允许每个组件使用一个v-model 。为了支持复杂组件的双向数据绑定，必须在v-model 上使用一个完整的有效载荷。

该组件将处理所有输入元素的状态，并生成一个单一的payload对象来表示该组件的状态。然后，一个附带有效载荷的事件将被发射到父组件。

这种方法在创建Vue UI库时产生了一些问题，因为它并不总是清楚有效载荷中包括什么。开发人员别无选择，只能循环浏览payload对象，以确定包括哪些属性。

幸运的是，在构建支持双向数据绑定的自定义组件时，Vue 3为开发者提供了更多的灵活性和力量。在Vue 3中，我们可以根据需要使用尽可能多的v-model 指令。这可能是相当方便的，正如我们将在本文后面演示的那样。

多个v-model 指令的绑定教程

让我们看看我们如何使用多个v-model 指令绑定来简化复杂的Vue表单。

在我们的例子中，我们将使用一个结账表单，其中列出了用户的名字、姓氏和电子邮件地址，然后是一些与账单和交付有关的字段。

Checkout Form

创建可重复使用的组件

账单和交付部分包括街道名称、街道号码、城市和邮政编码。

但是，由于用户的帐单和送货地址往往是相同的，让我们为表单创建一个可重复使用的地址组件。

首先，我们将使用以下命令设置Vue应用程序。

vue create <project-name>

然后，我们将在src 文件夹中的components 文件夹内创建一个可重复使用的组件，AddressFieldGroup.vue 。

这个可重用组件将被导入我们的App.vue 文件中。通过v-model，这个可重用组件将被绑定到App.vue 文件中的一个自定义组件。

让我们仔细看看这个可重复使用的组件。AddressFieldGroup.vue:

AddressFieldGroup.vue

<template>
  <section class="address">
    <h2>{{ label }}</h2>
    <div class="address__field">
      <label for="streetName">Street name</label>
      <input
        type="text"
        id="streetName"
        :value="streetName"
        @input="$emit('update:streetName', $event.target.value)"
        required
      />
    </div>
    <div class="address__field">
      <label for="streetNumber">Street number</label>
      <input
        type="text"
        id="streetNumber"
        :value="streetNumber"
        @input="$emit('update:streetNumber', $event.target.value)"
        required
      />
    </div>
    <div class="address__field">
      <label for="city">City</label>
      <input
        type="text"
        id="city"
        :value="city"
        @input="$emit('update:city', $event.target.value)"
        required
      />
    </div>
    <div class="address__field">
      <label for="postcode">Postcode</label>
      <input
        type="text"
        id="postcode"
        :value="postcode"
        @input="$emit('update:postcode', $event.target.value)"
        required
      />
    </div>
  </section>
</template>

<script>
export default {
  name: "AddressFieldGroup",
  props: {
    label: {
      type: String,
      default: "",
    },
    streetName: {
      type: String,
      default: "",
    },
    streetNumber: {
      type: String,
      default: "",
    },
    city: {
      type: String,
      default: "",
    },
    postcode: {
      type: String,
      default: "",
    },
  },
};
</script>

在上面的代码中，类名为address 的部分元素被重复使用（正如我们在本文后面会看到的那样），在父组件中创建Billing Address 和Delivery Address 。

label 道具给了每个地址部分相关的名称和四个输入字段。streetName,streetNumber,city, 和postcode 。每个输入字段的道具以及label ，都在script 标签中定义。

label 道具将从自定义组件AddressFieldGroup ，传递到其在App.vue 文件中的父组件，以便为每个地址组提供一个独特的标签或名称（例如，Billing Address 或Delivery Address ）。

创建CheckoutForm

现在，我们将在我们的App.vue 文件中创建结账表格，并将AddressFieldGroup.vue 也导入到App.vue 文件中。

App.vue

<template>
  <div class="app">
    <form @submit.prevent="handleSubmit" class="checkout-form">
      <h1>Checkout Form</h1>
      <div class="address__field">
        <label for="firstName">First name</label>
        <input type="text" id="firstName" v-model="form.firstName" required />
      </div>
      <div class="address__field">
        <label for="lastName">Last name</label>
        <input type="text" id="lastName" v-model="form.lastName" required />
      </div>
      <div class="address__field">
        <label for="email">Email</label>
        <input type="email" id="email" v-model="form.email" required />
      </div>
      <AddressFieldGroup
        label="Billing Address"
        v-model:streetName="form.billingAddress.streetName"
        v-model:streetNumber="form.billingAddress.streetNumber"
        v-model:city="form.billingAddress.city"
        v-model:postcode="form.billingAddress.postcode"
      />
      <AddressFieldGroup
        label="Delivery Address"
        v-model:streetName="form.deliveryAddress.streetName"
        v-model:streetNumber="form.deliveryAddress.streetNumber"
        v-model:city="form.deliveryAddress.city"
        v-model:postcode="form.deliveryAddress.postcode"
      />
      <div class="address__field">
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
import AddressFieldGroup from "./components/AddressFieldGroup";
import { reactive } from "vue";

export default {
  name: "CheckoutForm",
  components: {
    AddressFieldGroup: AddressFieldGroup,
  },
  methods: {
    handleSubmit() {
      alert("form submitted");
    },
  },
  setup() {
    const form = reactive({
      firstName: "",
      lastName: "",
      email: "",
      billingAddress: {
        streetName: "",
        streetNumber: "",
        city: "",
        postcode: "",
      },
      deliveryAddress: {
        streetName: "",
        streetNumber: "",
        city: "",
        postcode: "",
      },
    });

    return {
      form,
    };
  },
};
</script>

<style lang="scss">
.app {
  font-family: Arial, Helvetica, sans-serif;
  color: #434141;
  text-align: center;
}
.checkout-form {
  margin: 5px auto;
  padding: 10px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.address__field {
  padding-bottom: 10px;
  width: 250px;
  text-align: left;
}
label {
  display: block;
  font-weight: bold;
}

input {
  padding: 10px;
  width: 230px;
  border: 1px solid #fff;
  border-radius: 5px;
  outline: 0;
  background: #f8edcf;
}

button {
  margin-top: 30px;
  padding: 10px;
  width: 250px;
  color: #f8edcf;
  border: 1px solid #fff;
  border-radius: 5px;
  outline: 0;
  background: #434141;
}
</style>

在上面的代码中，我们已经创建了一个CheckoutForm ，其中包含三个输入字段。firstName,lastName, 和email 。我们还在表单中嵌入了两次可重复使用的AddressFieldGroup 组件，用它来表示用户的账单地址和送货地址。

我们使用v-model:{property-name} 格式来绑定这两个自定义AddressFieldGroup 组件上的每个属性。

除了v-model 的速记语法外，这种代码也更短、更简单、更容易阅读。这使我们能够快速破译和解码在父组件和自定义组件（在这种情况下，可重复使用的AddressFieldGroup 组件）之间传递的属性。

我们还在CheckoutForm ，定义了所有属性，包括两个地址的属性。我们将这些属性保存在一个名为 form**,** 将其值返回给组件，并使用它来设置CheckoutForm 上的绑定。

总结

在这篇文章中，我们探讨了v-model 指令，确定了哪些Vue修改器可以与之配合使用，并演示了如何在Vue组件上使用多个v-model 绑定，以简化复杂Vue表单的创建。

avatar
文章
阅读
粉丝