Tabla de contenido
Recuerde el uso nativo básico:
Encapsulación de entrada nativa:
Parámetros personalizados del modelo v:
Encapsulación secundaria de entrada electrónica:
Vinculación de múltiples modelos v:
Combinación de parámetros personalizados de v-model y modificadores personalizados:
Prefacio:
Hablando de v-model, debe estar familiarizado con él. Como una gramática clásica de vue, nos ayuda a ahorrar muchas cosas al escribir proyectos. ¡Este artículo se enfoca en registrar el enlace y el uso de v-model en componentes!
Recuerde el uso nativo básico:
Usando la entrada nativa, generalmente escribimos así:
<input type="text" v-model="name">Esta notación es equivalente a la siguiente notación:
<input type="text" :value="name" @input="e=> name = e.target.value">
<input type="text" :value="name" @input="name = $event.target.value">Y cuando usamos el método de escritura del modelo v en un componente, el tiempo de escritura real se ve así:
<custom-input :model-value="name" @update:modelValue="newValue=>name = newValue"></custom-input>Tenga en cuenta que model-value y @update:modelValue no están especificados por mí, ¡sino por vue!
Entonces, si queremos usarlo así, debemos vincular el valor de entrada dentro del componente al valor del modelo.
Cuando se active el tiempo de entrada original, use @update:modelValue para llevar a cabo el nuevo valor.
<custom-input v-model="name"></custom-input>Encapsulación de entrada nativa:
<template>
<div>modelValue: <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"></div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue"
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>u otra forma de escribir:
<template>
<div>modelValue: <input v-model="value"></div>
</template>
<script setup>
import {defineProps,defineEmits,computed} from "vue"
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const value = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
}
})
</script>
Ambas formas de escritura están disponibles, por lo que podemos introducir nuestros componentes personalizados, utilizando esta forma de escritura
<template>
<custom-input v-model="name"></custom-input>
<div>name:{
{name}}</div>
</template>
<script setup>
import {ref} from "vue";
import CustomInput from "./components/custom-input/index.vue";
const name = ref('')
</script>
Parámetros personalizados del modelo v:
De manera predeterminada, todos los componentes usan modelValue como su accesorio y update:modelValue como el evento de actualización correspondiente. ¡A veces necesitamos cambiarlo!
La regla básica es, el accesorio personalizado: xxx, el evento de actualización correspondiente: actualización: xxx, el componente se convierte en v-model: xxx, el siguiente es un ejemplo de valor
<template>
<div>自定义v-model的参数，例：value: <input :value="value" @input="$emit('update:value', $event.target.value)"></div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue"
const props = defineProps(['value'])
const emit = defineEmits(['update:value'])
</script>
Luego lo usamos en el componente y queda así:
<custom-input v-model:value="name"></custom-input>
Entonces, cuando usamos el componente el-input en element-plus, encontraremos que está escrito así
Al usar el componente de entrada en Naive UI o Ant Design Vue, encontrará que está escrito así
En general, element-plus usa el valor predeterminado, mientras que los otros dos tienen parámetros personalizados para él, ¡y los parámetros son valiosos!
En cuanto a otra forma de escribir usando computadora, ¡simplemente edite de acuerdo con la versión más básica!
Encapsulación secundaria de entrada electrónica:
Cuando escribimos un proyecto normalmente, generalmente elegimos un marco de interfaz de usuario adecuado para el proyecto, ya sea elemento-plus o ingenuo, etc., no podemos decir que podemos escribir un componente de entrada nativo para empaquetar, a menos que su entrada se vea particularmente extraño . . En la mayoría de los casos, podemos volver a encapsular los componentes de la biblioteca de componentes de la interfaz de usuario y es más probable que sea una encapsulación comercial.
Aquí tomamos el-input como ejemplo. Como se mencionó anteriormente, el-input en realidad usa el parámetro predeterminado modelValue. También podemos verlo leyendo el documento el-input --- el- input ;
Por lo tanto, cuando volvemos a encapsular el-input, debemos escribir:
<template>
<div>
modelValue:
<el-input :model-value="modelValue" @input="$emit('update:modelValue',$event)" />
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue"
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
Si está utilizando la biblioteca de componentes Naive UI, entonces necesita usar value y update:value cuando vuelva a encapsular el componente n-input, ¡y lo mismo es cierto para otras bibliotecas de componentes!
Vinculación de múltiples modelos v:
Cuando escribimos varios cuadros de entrada u otros componentes de formulario similares en un componente personalizado, debemos usar varios modelos V en el componente. En este momento, el valor del modelo predeterminado no es suficiente para nosotros, por lo que se requiere un parámetro de modelo V personalizado. . ¡Es muy simple, solo escríbanlo juntos y está bien!
<template>
<div>
modelValue:
<el-input :model-value="modelValue" @input="$emit('update:modelValue',$event)" />
</div>
<div>
自定义v-model的参数，例：value:
<el-input :model-value="value" @input="$emit('update:value',$event)" />
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue"
const props = defineProps(['modelValue', 'value'])
const emit = defineEmits(['update:modelValue', 'update:value'])
</script>
<template>
<custom-el-input v-model="name" v-model:value="desc"></custom-el-input>
<div>name:{
{name}}</div>
<div>desc:{
{desc}}</div>
</template>
<script setup>
import CustomElInput from "./components/custom-el-input/index.vue"
import {ref} from "vue";
const name = ref('')
const desc = ref('')
</script>
modificador de modelo v:
Con respecto a los modificadores de v-model, sabes que hay algunos modificadores incorporados, como .trim, .number y similares. A veces, necesitamos modificadores personalizados, ¡vea el ejemplo a continuación!
Hay un requisito: cuando ingrese la palabra "Qianjue" en el cuadro de entrada, se convertirá en ***. Este modificador, decidí llamarlo .replace, ¡y el efecto escrito se ve así!
<custom-el-input v-model.replace="name"></custom-el-input>Entonces, ¿cómo escribir dentro del componente?
En primer lugar, debemos escribir el valor predeterminado del modelo en accesorios, y luego debemos agregar los modificadores del modelo, que también es el valor predeterminado, y el valor del modelo coincide. Tenga en cuenta que el valor predeterminado de los modificadores del modelo es un objeto vacío.
<template>
<div>modelValue:
<el-input :model-value="modelValue" @input="input" />
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue";
const props = defineProps({
modelValue: String,
modelModifiers: {default: () => ({})}
})
const emit = defineEmits(['update:modelValue'])
/* 将 千珏 关键字代替为 *** 字 */
const input = (value) => {
console.log(props);
}
</script>
Los accesorios de impresión pueden ver el siguiente contenido,
Cuando usamos v-model.replace en el componente, replace es verdadero aquí, luego podemos continuar felizmente con el siguiente paso, aquí uso el método _replace de lodash: _replace de lodash
/* 将 千珏 关键字代替为 *** 字 */
const input = (value) => {
const replace = props.modelModifiers.replace
const keyWord = '千珏'
const replaceWord = '***'
if (replace) {
value = _replace(value, keyWord, replaceWord)
}
emit('update:modelValue', value)
}La pantalla de la página se verá así: *** es Qian Jue, ¡jeje!
Combinación de parámetros personalizados de v-model y modificadores personalizados:
La demanda vuelve: cuando ingresamos letras minúsculas, automáticamente cambiará a las letras mayúsculas correspondientes.
En este caso, modelValue y modelModifiers ya no se pueden usar, por supuesto. La regla en este momento es que personalizamos un parámetro xxx, y los modelModifiers correspondientes se convertirán en xxxModifiers Aquí, tomando value como ejemplo, los props tendrán dos parámetros, value y valueModifiers.
<template>
<div>自定义v-model的参数，例：value:
<el-input :model-value="value" @input="input" />
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue";
import _toUpper from "lodash/toUpper"
const props = defineProps({
value: String,
valueModifiers: {
default: () => ({})
}
})
const emit = defineEmits(['update:value'])
/* 将 小写字母 转化为 大写字母 */
const input = (value) => {
const toUpper = props.valueModifiers.toUpper
if (toUpper) {
value = _toUpper(value)
}
emit('update:value', value)
}
</script>
Uso de componentes:
<custom-el-input v-model:value.toUpper="desc"></custom-el-input>
En este punto, cómo ingresamos letras minúsculas se convertirá automáticamente a mayúsculas, ¡lo cual es un éxito!
