Liaison de propriété
ofa.js permet de lier des données aux propriétés des objets après l'instanciation des éléments, telles que les attributs value ou checked d'un élément input, etc.
Liaison de propriété unidirectionnelle
La liaison de propriété unidirectionnelle utilise la syntaxe :toKey="fromKey" pour synchroniser les données du composant de manière « unidirectionnelle » vers les attributs de l'élément DOM. Lorsque les données du composant changent, l'attribut de l'élément est mis à jour immédiatement ; mais les modifications de l'élément lui-même (comme la saisie de l'utilisateur) ne sont pas répercutées en sens inverse vers le composant, maintenant ainsi le flux de données unique et contrôlable.
Valeur actuelle: {{val}}
Remarque : modifier le contenu directement dans la zone de saisie ne changera pas la valeur affichée ci-dessus.
Liaison bidirectionnel des propriétés
La liaison de propriété bidirectionnelle utilise la syntaxe sync:xxx, réalisant une synchronisation bidirectionnelle entre les données du composant et les éléments DOM. Lorsque les données du composant changent, les attributs des éléments DOM sont mis à jour ; lorsque les attributs des éléments DOM changent (par exemple, lors de la saisie de l'utilisateur), les données du composant sont également mises à jour en synchronisation.
Valeur actuelle : {{val}}
Astuce : modifier le contenu dans la zone de saisie mettra à jour en temps réel la valeur affichée ci-dessus
Caractéristiques de la liaison bidirectionnelle
- Flux de données : composant ↔ élément DOM (bidirectionnel)
- Changement des données du composant → mise à jour de l'élément DOM
- Changement de l'élément DOM → mise à jour des données du composant
- Convient aux scénarios nécessitant une saisie utilisateur et une synchronisation des données
Liaison bidirectionnelle de l'objet
Pour la liaison de données de type objet, il n'est pas nécessaire d'utiliser la syntaxe sync, il suffit d'utiliser : pour une transmission unidirectionnelle. Cela est dû au fait que les objets en JavaScript sont partagés par référence : lorsque le composant parent transmet un objet au composant enfant, ce dernier obtient une référence au même objet, et toute modification de l'objet se reflète directement sur les données d'origine.
ofa.js conserve cette caractéristique de JavaScript, de sorte que la transmission unidirectionnelle d'un objet équivaut en réalité à une transmission bidirectionnelle. Par exemple :
<template page>
<child-comp :userData="userInfo"></child-comp>
<script>
export default async () => {
return {
data: { userInfo: { name: "Jean", age: 25 } }
};
};
</script>
</template>Dans le composant child-comp, si vous modifiez directement userData.name, le userInfo.name dans le composant parent sera également mis à jour, car ils pointent vers la même référence d'objet.
Scènes courantes de liaison bidirectionnelle
Exemple de liaison bidirectionnelle de formulaire
Aperçu en temps réel :
Texte : {{textInput}}
Nombre : {{numberInput}}
Texte multilignes : {{textareaInput}}
Sélection : {{selectedOption}}
État de la case à cocher : {{isChecked ? 'coché' : 'non coché'}}
Points d'attention
- Considérations de performance : la liaison bidirectionnelle crée des écouteurs de données ; un usage massif peut impacter les performances
- Cohérence des données : la liaison bidirectionnelle garantit la cohérence entre données et vue, mais il faut éviter les mises à jour en boucle infinie
- Valeur initiale : assurez-vous que les données liées possèdent une valeur initiale appropriée pour éviter l’affichage de undefined
- Conflits d’événements : évitez d’utiliser simultanément la liaison bidirectionnelle et la gestion manuelle d’événements sur le même élément afin de prévenir tout conflit