Voici une traduction gratuite de l'article " 10 trucs et astuces pour faire de vous un meilleur développeur VueJS " de Dev.to. L'auteur nous parlera des options intéressantes et utiles pour utiliser les outils VueJS habituels.
Présentation
J'aime vraiment travailler avec VueJS et chaque fois que je fais cela, je plonge plus profondément dans ses capacités et ses fonctionnalités. Dans cet article, je vous présente 10 trucs et astuces sympas que vous ne connaissiez probablement pas et qui vont essayer de vous aider à devenir le meilleur développeur sur VueJS.
Rendons la syntaxe des slots belle
Avec la sortie de Vue 2.6, des abréviations pour les emplacements sont devenues disponibles, qui peuvent être utilisées comme événements (par exemple, l'abréviation @click pour v-on:click ) ou deux points pour la liaison de données ( :src ). Si vous avez par exemple un composant de table, vous pouvez utiliser la fonctionnalité suivante:
<template> ... <my-table> <template #row="{ item }"> /* some content here. You can freely use 'item' here */ </template> </my-table> ... </template>
$ on ('hook:')
Il s'agit d'une fonctionnalité intéressante que vous pouvez utiliser si vous devez définir un écouteur d'événements personnalisé ou un plug-in tiers dans les crochets created ou mounted et que vous devez le supprimer dans le crochet beforeDestroy pour éviter les fuites de mémoire. En utilisant $on('hook:') vous pouvez définir ou supprimer un événement dans un seul hook.
mounted() { const aThirdPartyPlugin = aThirdPartyPlugin() this.$on('hook:beforeDestroy', () => { aThirdPartyPlugin.destroy() }) }
Accessoires de validation
Peut-être savez-vous déjà qu'il est possible de valider vos accessoires avec des valeurs primitives, telles que String , Number ou Object . Mais vous pouvez également créer un validateur personnalisé, par exemple pour vérifier un tableau de chaînes:
alertType: { validator: value => ['signup', 'login', 'logout'].includes(value) }
Arguments de directive dynamiques
L'une des fonctionnalités les plus intéressantes de VueJS 2.6 est la possibilité de déterminer dynamiquement des arguments de directive de composant. Supposons que vous ayez un composant bouton et que vous souhaitiez écouter l'événement Click sous certaines conditions et l'événement DoubleClick dans tous les autres cas. Voici un cas où une telle directive pourrait être utile:
<template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script>
Et ce qui est vraiment cool -> c'est que vous pouvez appliquer ce modèle à des attributs HTML dynamiques, des accessoires et bien plus encore!
Réutilisation de composants pour des itinéraires similaires
Parfois, vous avez différentes routes qui utilisent un ensemble de composants. Si vous basculez entre de telles routes, par défaut, le composant commun ne sera pas redessiné, car Vue réutilisera ce composant pour de meilleures performances. Mais si vous souhaitez redessiner ces composants, vous pouvez définir la propriété :key dans le Router-View-Component :
<template> <router-view :key="$route.fullPath"></router-view> </template>
Passer tous les accessoires du parent au composant enfant
C'est une fonctionnalité vraiment cool pour transmettre tous les accessoires du composant parent au composant enfant. Cette méthode est pratique si, par exemple, vous utilisez le composant wrapper. Ainsi, au lieu de passer toutes les propriétés en séquence, il vous suffit de les passer toutes en même temps:
<template> <childComponent v-bind="$props"/> </template>
Au lieu de cela:
<template> <childComponent :prop1="prop1" :prop2="prop2" :prop3="prop3" :prop4="prop4" ... /> </template>
Passer tous les écouteurs d'événements du parent au composant enfant
Si vous avez un composant enfant qui n'est pas root pour le composant parent, vous pouvez transmettre tous les écouteurs d'événements du parent à l'enfant comme ceci:
<template> <div> ... <childComponent v-on="$listeners"/> ... </div> </template>
Si le composant enfant est à la racine du parent, vous n'aurez pas besoin d'une telle astuce et tous les événements seront disponibles par défaut.
$ createElement
Chaque instance de Vue a accès par défaut à la $createElement , qui crée et renvoie des nœuds virtuels. Cela peut être utilisé, par exemple, pour utiliser le balisage dans des méthodes qui peuvent être passées à la directive v-html . Dans les composants fonctionnels, cette méthode est disponible comme premier argument de la fonction de render .
Utilisation de JSX
À partir de Vue CLI 3 , le support JSX est apparu par défaut. Vous pouvez maintenant écrire votre code à l'aide de JSX (par exemple, si vous êtes plus à l'aise après la réaction), il peut également être plus pratique, par exemple, pour écrire des composants fonctionnels. Si vous n'utilisez pas déjà Vue CLI 3 , vous pouvez utiliser babel-plugin-transform-vue-jsx pour prendre en charge JSX dans votre projet.
Modèle en v personnalisé
Par défaut, le v-model est ce que nous appelons le sucre syntaxique sur les @input et :value . Mais vous pouvez spécifier la propriété du model dans votre composant Vue et déterminer quel événement et quels accessoires seront utilisés:
export default: { model: { event: 'change', prop: 'checked' } }
Conclusion
J'espère avoir pu vous donner quelques conseils pour vous aider à devenir le meilleur développeur VueJS.