Comment le modèle V peut-il être utilisé pour la liaison de données bidirectionnelle sur des composants personnalisés dans Vue?

Pour utiliser le modèle V pour implémenter la liaison bidirectionnelle des composants personnalisés dans Vue, vous devez d'abord comprendre son mécanisme de travail. Pour les composants personnalisés, vous avez besoin: 1. Recevez un accessoire nommé ModelValue; 2. Déclencher un événement nommé Update: ModelValue. Par défaut, sera analysé à , donc le composant doit utiliser: value = "ModelValue" et $ emit ('update: ModelValue') pour synchroniser les données. De plus, vous pouvez personnaliser les noms d'accessoires et d'événements via le modèle: {prop: «vérifié», événement: «Change»}, qui convient à différents types de composants tels que les commutateurs ou les curseurs. Vue 3 prend également en charge plusieurs liaisons en V V, telles que V-model: Title et V-model: Content. À l'heure actuelle, le composant doit définir respectivement le titre et le contenu comme accessoires et déclencher la mise à jour correspondante: Title et mise à jour: événements de contenu. Il est recommandé d'être clair pour éviter les conflits. Dans le même temps, notez que le modificateur .Sync ou les événements de liaison manuelle sont nécessaires à Vue 2. Après avoir maîtrisé ce mode, il sera plus flexible de créer des composants d'interface utilisateur réutilisables.

En Vue, l'utilisation v-model pour la liaison de données bidirectionnelle sur les composants personnalisés est simple une fois que vous comprenez comment cela fonctionne sous le capot. Par défaut, v-model sur un élément d'entrée natif fait deux choses: il lie la valeur de l'entrée à un élément de données (comme value ) et émet un événement (comme input ) lorsque la valeur change. Pour les composants personnalisés, il vous suffit d'imiter ce comportement.

Comment fonctionne v-model avec les composants personnalisés

Lorsque vous utilisez v-model sur un composant personnalisé comme celui-ci:

 <Personnalisation V-model = "message" />

Vue le traduit en:

 <Personnaliser
  : ModelValue = "Message"
  @upDate: ModelValue = "Message = $ Event"
/>

Donc, dans votre composant, vous devez:

• Accepter un accessoire nommé modelValue
• Émettez un événement nommé update:modelValue avec la nouvelle valeur

Voici un exemple simple dans un composant:

 <mpelate>
  <entrée
    : value = "ModelValue"
    @Input = "$ Emit (&#39;Update: ModelValue&#39;, $ event.target.value)"
  />
</ template>

<cript>
Exporter par défaut {
  accessoires: [&#39;ModelValue&#39;],
  modèle: {
    Prop: «ModelValue»,
    Événement: &#39;Mise à jour: ModelValue&#39;
  }
}
</cript>

Cette configuration permet à votre composant personnalisé de fonctionner de manière transparente avec v-model

Gérer différents noms d'accessoires / événements

Si vous ne souhaitez pas utiliser modelValue et update:modelValue , vous pouvez personnaliser les noms en mettant à jour l'option model dans votre composant. Ceci est utile si votre composant représente autre chose qu'une entrée générique - disons, un interrupteur à bascule ou un curseur.

Par exemple:

 modèle: {
  Prop: «vérifié»,
  Événement: «Changement»
}

Maintenant, votre composant attend un accessoire checked et émet un événement change au lieu des valeurs par défaut. Lorsque quelqu'un utilise v-model sur votre composant, il mappera automatiquement à ces noms.

Utilisation v-model avec plusieurs liaisons

Vue 3 permet plusieurs v-model sur un seul composant en utilisant la syntaxe d'argument. Par exemple:

 <Customform
  V-model: title = "Pagetitle"
  V-model: content = "PageContent"
/>

À l'intérieur du composant, vous définissez à la fois title et content comme accessoires et émettez update:title et update:content .

Cette fonction facilite la liaison de plusieurs données sans avoir à créer une API plus complexe pour votre composant.

Conseils pour travailler avec v-model dans des composants personnalisés

• Assurez-vous toujours que votre composant accepte le bon accessoire ( modelValue par défaut) et émet le bon événement ( update:modelValue )
• Si vous soutenez les anciennes versions de Vue (comme Vue 2), vous devrez utiliser des modificateurs .sync ou câbler manuellement la paire de prop / événement
• Vous pouvez combiner v-model avec d'autres accessoires / événements sans conflit
• Utilisez des conventions de dénomination claires lorsque vous utilisez plusieurs v-model pour éviter la confusion

Fondamentalement, c'est tout. Une fois que vous avez baissé le modèle, il devient une seconde nature - et il ouvre beaucoup de flexibilité lors de la construction de composants d'interface utilisateur réutilisables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!