Vue pour les débutants: Sugar de configuration de script

Vue 3 nous permet de créer des composants à l’aide de la configuration du script, réduisant la quantité de code à écrire. Voici comment en capitaliser!

Avec Vue 3 vient non seulement la possibilité d’utiliser l’API de composition, mais aussi la capacité de créer des composants à l’aide de la configuration du script pour minimiser la quantité de code que nous devons écrire. La configuration du script en soi est principalement du sucre syntaxique, et pour cette raison, nous avons quelques fonctions «magiques» (ou macros de compilateur si vous voulez être technique) que vous devez vous familiariser si vous allez tirer parti de ses capacités.

définiprops

Lors de la création d’un composant avec configuration de script, l’une des premières choses que vous rencontrerez probablement est la nécessité de créer et de définir les propriétés des composants.

Dans l’API Options, cela est extrêmement clair car nous définissons la propriété d’accessoires dans l’objet qui est exporté au niveau supérieur.

<script>
export default {
  props: {
    myProp: { type: String, required: true },
    optional: { type: Boolean, default: false } 
  }
}
</script>

Pour pouvoir y parvenir dans la configuration du script, nous utilisons une fonction magique appelée DefineProps. La fonction reçoit soit un tableau de chaînes pour définir les noms de propriétés, soit la même syntaxe d’objet à laquelle vous êtes déjà utilisé avec l’API Options.

L’exemple ci-dessus, écrit dans la configuration du script et le levier DefineProps, est écrit comme suit:

<script setup>
defineProps({
  myProp: { type: String, required: true },
  optional: { type: Boolean, default: false } 
})
</script>

Notez que si vous souhaitez utiliser ces accessoires directement dans votre script, par exemple pour créer une propriété calculée, vous pouvez capturer la valeur de retour de la fonction – un objet réactif.

<script setup>
const props = defineProps({
  myProp: { type: String, required: true },
  optional: { type: Boolean, default: false } 
})

const componentTitle = computed(() => props.optional ? 'Optional' : 'Required' )
</script>

Pour une version simplifiée, nous pouvons écrire ceci à l’aide de la syntaxe du tableau. Cependant, notez que nous perdons la capacité d’avertir nos développeurs d’erreurs de type.

<script setup>
defineProps(['myProp', 'optional'])
</script>
defineEmits

définir les éléments

Un composant interagira généralement avec d’autres composants par le biais de son API publique qui se compose d’accessoires et d’émissions. Nous venons d’apprendre ci-dessus à déclarer les accessoires dans nos composants de configuration de script, mais comment pouvons-nous déclarer quels événements notre composante émet?

Tout comme nous avons DefineProps, Vue 3 nous accorde également la fonction DefineeMits. Cette fonction prend un paramètre, un tableau de chaînes ou un objet, comme l’a fait DefineProps.

Considérez le composant suivant qui émet un événement de clic.

<script setup>
const emit = defineEmits(['click'])
</script>

<template>
  <button @click="emit('click')" />
</template>

Le composant utilise la fonction DefineeMits pour déclarer que ce composant émettra un événement de clic. Cela permet de réduire les erreurs, car Vue vous avertira si vous émettez un événement qui n’est pas déclaré dans la déclaration DefineEmmits, et cela nous permet également de déclarer des types d’émissions, plus à ce sujet en une seconde.

La fonction DefineeMits renvoie une autre fonction que nous nommons émettre, et nous utilisons cette fonction pour émettre l’événement de clic réel sur l’entrée de notre bouton. Cette fonction peut également être utilisée en interne dans la section de script pour émettre dynamiquement des événements si nécessaire.

Si nous voulions être un peu plus sûrs, nous pouvons utiliser la syntaxe d’objet (comme avec nos accessoires) pour déclarer un type d’émit, et même un validateur.

<script setup>
const props = defineProps({
  number: { type: Number, required: true }
})

const emit = defineEmits({
  click: {
    type: Number,
    validator: num => num > 0
  }
})

const emitValue = () => {
  emit(props.number + 1)
}
</script>

<template>
  <button @click="emitValue" />
</template>

Il y a quelques changements ici. Nous avons ajouté un numéro d’accessoire pour améliorer notre exemple. Cela nous permet d’ajouter une valeur d’émission à notre événement de clic afin que nous puissions démontrer la syntaxe d’objet de DefineeMits.

Notez que notre clic émetteur déclare désormais un type de nombre et même un validateur qui vérifie que la valeur émise est toujours supérieure à 0. Ceci est assez précieux et permet d’attraper les erreurs de développement tôt, car ces avertissements seront signalés dans la console de navigateur et les suites de test comme Viest.

Notez en outre que la fonction EMIT est maintenant utilisée dans la fonction de wrapper EmitValue. Comme décrit ci-dessus, la fonction renvoyée par DefineeMits peut être utilisée pour émettre une valeur dans le bloc de script lui-même si nécessaire.

déménager

Dans Vue 3 le par défaut du modèle V considérablement modifié par rapport à la façon dont ils ont été déclarés dans Vue 2. Nous utilisons maintenant ModelValue comme propriété par défaut pour un modèle et une mise à jour: ModelValue pour la valeur d’émission par défaut d’un modèle V dans un composant. Je n’entrerai pas en profondeur sur la nouvelle syntaxe du modèle V car ceci est hors de l’étendue de l’article. Au lieu de cela, nous explorerons comment nous pouvons exploiter Defimodel pour créer rapidement plusieurs propriétés de modèle V au sein de notre composant.

Considérez l’exemple suivant:

<script setup>
defineProps({
  modelValue: String,
  name: { type: String, default: 'Marina' }
})

defineEmits(['update:modelValue', 'update:name'])
</script>

DefiModel nous permet de déclarer rapidement un «modèle» pour les deux accessoires ci-dessus sans avoir à les déclarer en plus dans nos émissions.

<script setup>
const modelValue = defineModel({ type: String })
const name = defineModel('name', { type: String, default: 'Marina' })
</script>

Notez que le premier appel de définition de définition ne passe pas de chaîne initialement pour déclarer le nom du modèle en tant que ModelValue. En effet, ModelValue est déjà la valeur par défaut, pouvons-nous pouvoir le sauter en toute sécurité.

Le deuxième exemple crée la propriété de nom pour nous, et sous le capot déclare également la mise à jour: le nom émettait afin que le composant consommé puisse le se lier à l’aide de la syntaxe V-Model: Nom.

définir

Les composants créés à l’aide de la syntaxe de configuration de script sont fermés par défaut. Cela signifie que contrairement aux composants réguliers, les propriétés que nous créons sur le composant pas être disponible pour accéder à l’aide de références de modèle ou d’accessoire de machine virtuelle dans les tests.

Afin de rendre certaines propriétés de notre composant disponibles pour être accessibles à l’extérieur de cette manière, nous devons les déclarer comme exposés avec DefineExpose comme suit.

<script setup>
const privateProp = ref(123)
const publicProp = ref(234)

defineExpose({
  publicProp
})
</script>

Si quelqu’un où essayer d’accéder à Publicprop de notre composant via un $ ref ou via le .vm dans un test, alors composant.publicprop égaliserait la valeur réactive de 234.

Cependant, si quelqu’un essayait d’accéder à la propriété PrivateProp, il serait indéfini car cette propriété n’est pas accessible au public.

Prenez note que l’exposition des propriétés doit être utilisée avec des soins extrêmes et normalement serait considéré comme une odeur de code à moins d’être documenté explicitement. Terr toujours du côté de l’exposition d’une API publique via un émetteur à la place lorsque cela est possible.

définir les options

Dans l’API Options, un composant peut être créé en déclarant la coutume Options de composants. Ces options déclarent normalement fournir une propriété statique qui n’est pas réactive mais utile aux internes du composant.

Afin de déclarer des options dans un composant de configuration de script, nous devons le déclarer en utilisant la fonction DefineOptions.

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    myOption: 123
  }
})
</script>

Notez qu’avant de créer notre option de myoption personnalisée, j’ai choisi d’ajouter un appel HéritAttrs. Je l’ai fait exprès parce que la plupart du temps lorsque vous vous trouvez dans le besoin pour déclarer des options dans un composant de configuration de script, vous le ferez pour contrôler Attribut Fallthrough dans votre composant.

Conclure

J’espère que ce message vous a aidé à comprendre ces macros de compilateur à utiliser dans vos applications VUE!