关于前端:在Vue-3中使用vmodel来构建复杂的表单

新出了一个系列：Vue2与Vue3 技巧小册

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

在本文中，咱们会介绍Vue 3中 v-model 指令的变动。而后，再通过一个事例解说下如何应用多个v-model绑定来简化Vue中简单表单的构建过程。

什么是 v-model 指令

v-model 指令能够在表单输出元素上实现双向数据绑定，比方 input 元素、textarea 元素和 select 元素等等。

它以两种形式解决数据更新:

当输出的值发生变化时，v-model 会将该值反映到组件外部的状态
当组件的状态发生变化时，v-model 会将变动反映到表单输出元素上

默认状况下，v-model 指令应用不同的属性，并为不同的输出元素收回不同的事件:

input 和 textarea 对应 value 属性和 input 事件
checkboxes 和 radio 对应 checked 属性和 change 事件
select 对应 value 属性和 change 事件

如果，咱们自定义一个 v-model，大抵实现如下：

<template>  <input    type="text"    :value="modelValue"    @input="$emit('update:modelValue', $event.target.value)"  /></template><script>export default {  props: {    modelValue: {      type: String,      default: '',      required: true,    },  },}</script>

在父组件中，就能够这样应用了：

<template>  <div>    <CustomComponent v-model:modelValue="name" />    以后输出的名字：{{ name }}    <!-- 简写模式 -->    <CustomComponent v-model="name" />  </div></template><script>import CustomComponent from './components/CustomComponent.vue'export default {  components: {    CustomComponent,  },  data() {    return {      name: '',    }  },}</script>

在自定义组件中，v-model 指令假设曾经定义了一个外部属性，名称为 modelValue，并收回了一个名为 update:modelValue 的事件。

咱们也能够并不局限于默认的命名规定，自行抉择咱们要应用的名字。为咱们的v-model绑定有描述性的名字。

只有确保在抉择命名属性时保持一致就能够了。这里有一个自定义名称fullName的例子，用于modelValue属性。

<template>  <input    type="text"    :value="fullName"    @input="$emit('update:fullName', $event.target.value)"  /></template><script>export default {  props: {    fullName: {      type: String,      default: '',      required: true,    },  },}</script>

在父组件中，就能够这样应用了：

<template>  <div>    <CustomComponent v-model:fullName="fullName" />    以后输出的名字：{{ fullName }}  </div></template><script>import CustomComponent from './components/CustomComponent.vue'export default {  components: {    CustomComponent,  },  data() {    return {      fullName: '',    }  },}</script>

留神：这里不能用简写的模式了，因为 modelValue 是默认的，能够在应用时候间接应用 v-model，而咱们自定义的 v-model 须要写上对应的修饰符名称 v-model:fullName。

v-model 是如何解决数据绑定的？

v-model指令有三个可用于数据绑定的润饰器：.lazy、.number 和 .trim。

.lazy

在默认状况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你能够增加 lazy 修饰符，从而转为在 change 事件之后进行同步：

<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" />

.number

如果想主动将用户的输出值转为数值类型，能够给 v-model 增加 number 修饰符：

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

.trim

如果要主动过滤用户输出的首尾空白字符，能够给 v-model 增加 trim 修饰符：

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

Vue3 中的 v-model 与 Vue2 有什么不同？

在 Vue 2.0 公布后，开发者应用 v-model 指令时必须应用名为 value 的 prop。如果开发者出于不同的目标须要应用其余的 prop，他们就不得不应用 v-bind.sync。此外，因为v-model 和 value 之间的这种硬编码关系的起因，产生了如何解决原生元素和自定义元素的问题。

在 Vue 2.2 中，咱们引入了 model 组件选项，容许组件自定义用于 v-model 的 prop 和事件。然而，这依然只容许在组件上应用一个 v-model。

在 Vue 3 中，双向数据绑定的 API 曾经标准化，以缩小开发者在应用 v-model 指令时的混同，并且更加灵便。

多个 v-model 绑定

当初，咱们来看看如何应用多个 v-model 指令绑定来简化简单的Vue表单。

例子中，咱们将应用一个结账表单，列出用户的名字、姓氏和电子邮件地址，而后是一些与账单和交付无关的字段。

创立可重用的组件

如上图所示 Billing 和 Delivery 都有 street name, street number, city, 和 postcode 字段。所以，咱们能够创立一个可重复使用的地址组件

首先，用如下命令，创立一个新的我的项目：

vue create <project-name>

而后，在 src/components 目录下创立可重用 AddressFieldGroup.vue。这个可重用的组件将被导入 App.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>

下面代码对四个字段：streetName、streetNumber、city 和 postcode，实现一个双向绑定，即：

:value="city"@input="$emit('update:city', $event.target.value)"

这样，咱们在内部就能够应用 v-model:字段名 来实时获取输出的值。

当初，将该组件导入 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组件，用它来示意用户的 Billing Address 和 Delivery Address.。

咱们应用v-model:{property-name}格局来绑定两个自定义 AddressFieldGroup 组件上的每个属性。

总结

在这篇文章中，咱们探讨了 v-model 指令，确定了哪些Vue润饰器能够和它一起应用，并演示了如何在Vue组件上应用多个 v-model 绑定来简化简单Vue表单的创立。

v-model让咱们能够灵便地在一个组件实例上增加多个 v-model 指令，而且 modelValue 也能够依据咱们的偏好进行重命名。

事例地址：https://codesandbox.io/s/v-mo...

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

作者：romaopedro 译者：前端小智起源：logrocket
原文：https://blog.logrocket.com/us...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。