El uso y el principio de implementación de v-model
Directorio de artículos
prefacio
Este artículo es principalmente para revisar el principio de v-model, incluido el principio de realización de vue2 y vue3.
1. ¿Qué puede hacer v-model?
1. El modelo v se puede utilizar en <input><select><textarea>componentes personalizados.
2. Cree enlaces bidireccionales en controles o componentes de formulario.
dos, uso
1. El comando de enlace bidireccional puede actualizar sincrónicamente el valor de entrada del control en la página al atributo de datos del enlace relevante, y también actualizará el atributo de enlace de datos.
2. Utilizado en componentes personalizados. Ver ejemplo
de versión 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,
}
}
versión 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. Principio de implementación
Si comprende el uso de los componentes personalizados anteriores, básicamente ha entendido el principio de v-model.
v-model Si v-model está "desmontado y escrito", será de la siguiente manera
<input type="text" :value="testValue" @input="testValue = $event.target.value">
Explicación:
1. Defina el atributo de datos, vincule la entrada al atributo de datos, escuche el evento de entrada y asigne un valor.
2. Use datos enlazados para realizar v-model
//示例：
<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 revisión ha aprendido muchas cosas olvidadas. Si tiene alguna pregunta, corríjame y aprendamos unos de otros.