【vue3】10.跟着官网学习vue3-表单输入绑定，双向绑定，封装input组件，封装ant-design-vue的input组件_vue3 input

每日鸡汤：不要因为懒惰，错过本该属于你的人生，这个世界上优秀的人很多，你做不到的总有人能做到，不要因为自己的懒散而错过本该属于你的人生。

目录

前言

一、双向绑定

1. 表单的类型

2.表单和v-model

3. 插值表达式

二、修饰符

1. .lazy

2..trim

三、组件上的v-model

1. 封装h5原生的input

（1）组件内不使用v-model，但使用value+input

（2）组件内也使用v-model

 2. 封装组件库(ant-design-vue)的input

（1）组件内不使用v-model，但使用value+input

（2）组件内也使用v-model

  3. 使用v-model参数

总结

---

前言

本篇文章对应的vue官网【表单输入绑定】这一部分很复杂，很重要

---

一、双向绑定

1. 表单的类型

1. textarea 
2. select
3. input （包括checkbox，radio）

请记住，一般提到表单类型，就是指的是上面说的这三种，checkbox和radio,都可以算作是input的延伸。这样记，因为表单要求有输入，回忆一下，能够输入的原生组件没有其他的了吧。

看下官方文档

2.表单和v-model

v-modal可以和上述所有的表单进行绑定，只是不同表单，绑定的事件不同

3. 插值表达式

我猜肯定有人不知道这个概念，就是在开始标签和闭合标签之间写内容，比如div和p

<div>这是插值表达式</div>

还有 空元素，就是单标签的元素，就是没有结束标签，常见的有input、 hr、img等，这个我在面试的过程中真的遇到过

<img src="xxx" />
<input value="X" />

二、修饰符

1. .lazy

将v-model的数据更新时机，由input事件后，改为change事件后

2..trim

这个很好用，通常用在搜索框中，因为一般来说，向后台传递一个检索的字符串是需要去除首尾空格的。

三、组件上的v-model

这部分对应官网【组件事件，配合v-model使用】

组件上的v-model最常用的场景是自己封装一个input组件，封装input组件还分为两种情况一种是封装h5原生的input，另一种是封装组件库的input控件，其实他俩的方法是一样的。

1. 封装h5原生的input

让我们使用input封装一个组件OInput

（1）组件内不使用v-model，但使用value+input

<!--OInput.vue-->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', ($event?.target as HTMLInputElement).value)"
  />
</template>
<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue';
const props = defineProps({
  modelValue: String,
});
const emits = defineEmits(['update:modelValue']);
</script>

<!--appa.vue引入组件-->
<template>
  当前的值：{{name}}
  <o-input v-model="name"></o-input>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import OInput from './component/OInput.vue';
 
const name = ref('init value')
 
</script>
<style>
#app {
  
}
</style>

让我们画一下重点

 这样就可以实现双向绑定，正如官网的例子，

（2）组件内也使用v-model

上面的例子中OInput内的input绑定没有使用v-model，是有外面调用组件的时候使用了，例子2是都使用v-model ，这就用到了，计算属性 

 2. 封装组件库(ant-design-vue)的input

方法都是一样的，无论用哪种方法都可以实现功能。

（1）组件内不使用v-model，但使用value+input

（2）组件内也使用v-model

看下ant-design-vue官网的例子，亲测，不写:value，无效

 

  3. 使用v-model参数

使用v-model的参数，也就是说我们在定义我们封装的组件的时候，props的变量可以不用modelValue，如果你看modelValue他不顺眼，那就换成value好了。 

---

总结

vue3中关于v-model记住一下几点

1. 默认绑定的组件的props的属性是modelValue，而不是value
2. v-model可以加参数，实现多个变量的双向绑定