Versión de programa pequeño cuadro de entrada de campo vant encuadernación bidireccional por lotes

Cuando desarrollo programas pequeños, uso HBulider Xuniapp+vue para el desarrollo de programas pequeños.

Al usar la versión de programa pequeño del cuadro de entrada de la biblioteca de componentes vant, descubrimos que no podía realizar el enlace bidireccional de datos, lo que nos angustiaba mucho. En este momento, podemos usar una forma de realizar el enlace bidireccional.
我们可以使用change事件来实现数据监听

1. Declarar un objeto para almacenar resultados de datos

import {
    
    reactive} from "vue";
const user = reactive({
    
    
   	phone: '',
   	code: ''
   })

2. Definir el cuadro de entrada

Usando :valuedatos enlazados, data-typeel valor es el mismo que la propiedad del objeto y el @inputevento de enlace

<van-field placeholder="请输入手机号"  :value="user.phone" data-type="phone"
				@change='inputUser'></van-field>
<van-field center clearable placeholder="请输入短信验证码" data-type="code" :value="user.code" @change='inputUser' >
</van-field>

3. Enlace bidireccional de datos

const inputUser = (e)=>{
    
    
		user[e.target.dataset.type] = e.detail
	}

versión completa

<template>
	<view class="app">
		<van-field placeholder="请输入手机号"  :value="user.phone" data-type="phone"
					 @change='inputUser'></van-field>
		<van-field placeholder="请输入短信验证码" data-type="code" :value="user.code" @change='inputUser' >
				</van-field>
	</view>
</template>

<script setup>
	import {
    
    
		reactive
	} from "vue";
	const user = reactive({
    
    
		phone: '',
		code: ''
	})
	const inputUser = (e)=>{
    
    	
		console.log(e);
		user[e.target.dataset.type] = e.detail
	}
</script>