Índice
Lembre-se do uso nativo básico:
Encapsulamento de entrada nativa:
Parâmetros personalizados do v-model:
Encapsulamento secundário de el-input:
Combinação de parâmetros personalizados do v-model e modificadores personalizados:
Prefácio:
Falando em v-model, você deve estar familiarizado com ele. Como uma gramática clássica do vue, ele nos ajuda a economizar muitas coisas ao escrever projetos. Este artigo se concentra em registrar a vinculação e o uso do v-model em componentes!
Lembre-se do uso nativo básico:
Usando entrada nativa, geralmente escrevemos assim:
<input type="text" v-model="name">Esta notação é equivalente à seguinte notação:
<input type="text" :value="name" @input="e=> name = e.target.value">
<input type="text" :value="name" @input="name = $event.target.value">E quando usamos o método de escrita v-model em um componente, o tempo real de escrita fica assim:
<custom-input :model-value="name" @update:modelValue="newValue=>name = newValue"></custom-input>Observe que model-value e @update:modelValue não são especificados por mim, mas por vue!
Portanto, se quisermos usá-lo assim, precisamos vincular o valor de entrada dentro do componente ao modelValue.
Quando o tempo de entrada original for acionado, use @update:modelValue para executar o novo valor!
<custom-input v-model="name"></custom-input>Encapsulamento 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>ou outra forma de escrever:
<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 as formas de escrita estão disponíveis, para que possamos introduzir nossos componentes customizados, usando esta forma de escrita
<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 do v-model:
Por padrão, todos os componentes usam modelValue como prop e update:modelValue como o evento de atualização correspondente. Às vezes, precisamos alterá-lo!
A regra básica é, o suporte personalizado: xxx, o evento de atualização correspondente: atualização: xxx, o componente se torna v-model: xxx, o seguinte é um exemplo 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>
Aí a gente usa no componente e fica assim:
<custom-input v-model:value="name"></custom-input>
Então, quando usarmos o componente el-input no element-plus, descobriremos que está escrito assim
Ao usar o componente de entrada em Naive UI ou Ant Design Vue, você descobrirá que está escrito assim
Em geral, o elemento-plus usa o padrão, enquanto os outros dois têm parâmetros personalizados para ele, e os parâmetros são valor!
Quanto a outra forma de escrever usando computado, basta editar de acordo com a versão mais básica!
Encapsulamento secundário de el-input:
Ao escrever um projeto normalmente, geralmente escolhemos uma estrutura de interface do usuário adequada para o projeto, seja ele element-plus ou ingênuo, etc., não podemos dizer que podemos escrever um componente de entrada nativo para empacotamento, a menos que sua entrada pareça particularmente estranho. . . Na maioria dos casos, podemos reencapsular os componentes da biblioteca de componentes da interface do usuário e, mais provavelmente, ser um encapsulamento de negócios.
Aqui tomamos el-input como um exemplo. Como mencionado acima, el-input na verdade usa o parâmetro padrão modelValue. Também podemos vê-lo lendo o documento el-input --- el- input ;
Portanto, quando reencapsulamos el-input, precisamos escrever:
<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>
Se você estiver usando a biblioteca de componentes Naive UI, precisará usar value e update:value ao reencapsular o componente n-input, e o mesmo vale para outras bibliotecas de componentes!
Vinculando vários modelos v:
Quando escrevemos várias caixas de entrada ou outros componentes de formulário em um componente personalizado, devemos usar vários modelos v no componente. No momento, o modelValue padrão não é suficiente para nós, então um parâmetro v-model personalizado é necessário . É muito simples, é só escrever junto e tá tudo bem!
<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 v-model:
Em relação aos modificadores do v-model, você sabe que existem alguns modificadores embutidos, como .trim, .number e outros. Às vezes, precisamos de modificadores personalizados, veja o exemplo abaixo!
Há um requisito: quando você digita a palavra "Qianjue" na caixa de entrada, ela se torna ***. Este modificador, decidi chamá-lo de .replace, e o efeito escrito fica assim!
<custom-el-input v-model.replace="name"></custom-el-input>Então, como escrever dentro do componente?
Antes de mais nada, precisamos escrever o modelValue padrão em props e, em seguida, precisamos adicionar modelModifiers, que também é o padrão, e modelValue é correspondido. Observe que o valor padrão de modelModifiers é um objeto vazio!
<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>
Os adereços de impressão podem ver o seguinte conteúdo,
Quando usamos v-model.replace no componente, replace é verdadeiro aqui, então podemos prosseguir para a próxima etapa, aqui eu uso o 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)
}A exibição da página ficará assim: *** é Qian Jue, hehe!
Combinação de parâmetros personalizados do v-model e modificadores personalizados:
A demanda volta: quando inserimos letras minúsculas, ela muda automaticamente para as letras maiúsculas correspondentes.
Nesse caso, modelValue e modelModifiers não podem mais ser usados, é claro. A regra neste momento é customizarmos um parâmetro xxx, e os modelModifiers correspondentes se tornarão xxxModifiers Aqui, tomando value como exemplo, as props terão dois parâmetros, value e 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>
Componentes usam:
<custom-el-input v-model:value.toUpper="desc"></custom-el-input>
Neste ponto, como inserimos as letras minúsculas serão convertidas automaticamente para maiúsculas, o que é um sucesso!
