O princípio de uso e implementação do v-model
Diretório de artigos
prefácio
Este artigo é principalmente para revisar o princípio do v-model, incluindo o princípio de realização de vue2 e vue3.
1. O que v-model pode fazer
1. v-model pode ser usado em <input><select><textarea>componentes personalizados.
2. Crie ligações bidirecionais em controles de formulário ou componentes.
Dois, uso
1. O comando de ligação bidirecional pode atualizar de forma síncrona o valor de entrada do controle na página para o atributo de dados da ligação relevante e também atualizará o atributo de ligação de dados.
2. Usado em componentes personalizados. Veja o exemplo
de versão vue2:
//示例1：
<div id="app">
<p>{
{
name}}</p>
<input type="text" v-model="name" />
</div>
data(){
return {
name: ""
}
}
//示例2：自定义组件使用v-model
//father component
<com-input v-model="inputValue"></com-input>
<div>{
{
inputValue}}</div>
data () {
return {
inputValue: ""
}
}
//child component
<div>
<input type="text" @input="$emit('myInput', $event.target.value)">
</div>
export default {
//可以通过model对象自定已prop的名称喝事件
model: {
prop: 'inputValue',//默认value
event: 'myInput',//默认input
},
props: {
myValue: String,
}
}
versão vue3:
//示例1：
<div id="app">
<p>{
{
name}}</p>
<input type="text" v-model="name" />
</div>
data(){
return {
name: ""
}
}
//示例2：
//father component
<com-input v-model:propValue="inputValue"></com-input>
<div>{
{
inputValue}}</div>
const inputValue = ref('')
//child component
<script>
export default {
props: ['propValue'],
emits: ['update:propValue']
}
</script>
<template>
<input
type="text"
:value="propValue"
@input="$emit('update:propValue', $event.target.value)"
/>
</template>
3. Princípio de implementação
Se você entender o uso dos componentes customizados acima, então você basicamente entendeu o princípio do v-model.
v-model Se o v-model for "desmontado e escrito" será o seguinte
<input type="text" :value="testValue" @input="testValue = $event.target.value">
Explicação:
1. Defina o atributo de dados, vincule a entrada ao atributo de dados, ouça o evento de entrada e atribua um valor.
2. Use dados vinculados para realizar o modelo v
//示例：
<div>{
{
testValue}}</div>
<input
type="text"
v-bind:value="testValue"
@input="testValue = $event.target.value"
/>
data() {
return {
testValue: "",
};
}
//示例：
//当组件使用的时候
<com-input
:propValue="inputValue "
@update:propValue="newValue => inputValue = newValue"
/>
Resumir
Esta revisão aprendeu muitas coisas esquecidas.Se você tiver alguma dúvida, corrija-me e aprenda uns com os outros.