共计 6656 个字符,预计需要花费 17 分钟才能阅读完成。
新出了一个系列: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… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。