每日鸡汤:不要因为懒惰,错过本该属于你的人生,这个世界上优秀的人很多,你做不到的总有人能做到,不要因为自己的懒散而错过本该属于你的人生。
目录
(1)组件内不使用v-model,但使用value+input
2. 封装组件库(ant-design-vue)的input
(1)组件内不使用v-model,但使用value+input
前言
本篇文章对应的vue官网【表单输入绑定】这一部分很复杂,很重要
一、双向绑定
1. 表单的类型
- textarea
- select
- input (包括checkbox,radio)
请记住,一般提到表单类型,就是指的是上面说的这三种,checkbox和radio,都可以算作是input的延伸。这样记,因为表单要求有输入,回忆一下,能够输入的原生组件没有其他的了吧。
2.表单和v-model
v-modal可以和上述所有的表单进行绑定,只是不同表单,绑定的事件不同
v-bind的属性 | 事件 | |
input | value | @input |
textarea | value | @input |
<input input type="checkbox"/> <input input type="radio"/> | checked | change |
select | value | change |
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记住一下几点
- 默认绑定的组件的props的属性是modelValue,而不是value
- v-model可以加参数,实现多个变量的双向绑定