Enlace de atributos
ofa.js admite la vinculación de datos a las propiedades de los objetos después de la instanciación de elementos, como las propiedades value o checked del elemento input, etc.
Vinculación de atributo unidireccional
Enlace unidireccional de propiedades utilizando la sintaxis :toKey="fromKey", que sincroniza los datos del componente de forma "unidireccional" con los atributos del elemento DOM. Cuando los datos del componente cambian, los atributos del elemento se actualizan de inmediato; sin embargo, los cambios propios del elemento (como la entrada del usuario) no se escriben de vuelta al componente, manteniendo el flujo de datos único y controlable.
Valor actual: {{val}}
Nota: Modificar directamente el contenido del cuadro de entrada no cambiará el valor mostrado arriba
Enlace bidireccional de propiedades
La vinculación bidireccional de atributos utiliza la sintaxis sync:xxx, logrando la sincronización bidireccional entre los datos del componente y los elementos del DOM. Cuando los datos del componente cambian, los atributos del elemento DOM se actualizan; cuando los atributos del elemento DOM cambian (como la entrada del usuario), los datos del componente también se actualizan sincrónicamente.
Valor actual: {{val}}
Consejo: modificar el contenido en el cuadro de entrada actualizará en tiempo real el valor mostrado arriba
Características de la vinculación bidireccional
- Flujo de datos: Componente ↔ Elemento DOM (bidireccional)
- Cambio en datos del componente → Actualización del elemento DOM
- Cambio en elemento DOM → Actualización de datos del componente
- Adecuado para escenarios que requieren entrada del usuario y sincronización de datos
Vinculación bidireccional de objetos
Para el enlace de datos de tipo objeto, no es necesario usar la sintaxis sync, simplemente use : para la transmisión unidireccional. Esto se debe a que los objetos en JavaScript son compartidos por referencia; cuando el componente padre pasa un objeto al componente hijo, este último obtiene una referencia al mismo objeto, por lo que las modificaciones en el objeto se reflejarán directamente en los datos originales.
ofa.js conserva esta característica de JavaScript, por lo que el paso unidireccional de objetos equivale en realidad a un paso bidireccional. Por ejemplo:
<template page>
<child-comp :userData="userInfo"></child-comp>
<script>
export default async () => {
return {
data: { userInfo: { name: "Zhang San", age: 25 } }
};
};
</script>
</template>Al modificar directamente userData.name en el componente child-comp, userInfo.name en el componente padre también se actualizará al mismo tiempo, ya que apuntan a la misma referencia de objeto.
Escenarios comunes de enlace bidireccional
Ejemplo de enlace bidireccional de formulario
Vista previa en tiempo real:
Texto: {{textInput}}
Número: {{numberInput}}
Texto multilínea: {{textareaInput}}
Selección: {{selectedOption}}
Estado de casilla: {{isChecked ? 'Marcado' : 'Sin marcar'}}
Notas importantes
- Consideraciones de rendimiento: el enlace bidireccional crea oyentes de datos; su uso intensivo puede afectar el rendimiento
- Consistencia de datos: el enlace bidireccional garantiza la coherencia entre datos y vista, pero hay que evitar ciclos de actualización infinitos
- Establecimiento de valores iniciales: asegúrese de que los datos enlazados tengan valores iniciales adecuados para evitar la visualización de undefined
- Conflictos de eventos: evite utilizar simultáneamente enlace bidireccional y manejo manual de eventos en el mismo elemento para prevenir conflictos