Avec la sortie de Vue 3, les développeurs doivent effectuer la mise à niveau de Vue 2 car il est livré avec une poignée de nouvelles fonctionnalités très utiles pour créer des composants faciles à lire et maintenables et des moyens améliorés de structurer notre application dans Vue. Nous allons examiner certaines de ces fonctionnalités dans cet article.
À la fin de ce tutoriel, les lecteurs le feront;
- Savoir a propos
provide / inject
et comment l'utiliser. - Avoir une compréhension de base de Teleport et comment l'utiliser.
- Connaître les fragments et comment les utiliser.
- Connaître les modifications apportées à l'API Global Vue.
- Connaître les modifications apportées à l'API Events.
Cet article s'adresse à ceux qui ont une bonne compréhension de Vue 2.x. Vous pouvez trouver tout le code utilisé dans cet exemple dans GitHub.
provide / inject
Dans Vue 2.x, nous avions props
cela a facilité la transmission des données (chaîne, tableaux, objets, etc.) d'un composant parent directement à son composant enfants. Mais au cours du développement, nous avons souvent trouvé des cas où nous devions transmettre des données du composant parent à un composant profondément imbriqué, ce qui était plus difficile à faire avec props
. Cela a abouti à l'utilisation de Vuex Store, Event Hub et parfois à la transmission de données via les composants profondément imbriqués. Regardons une application simple;
Il est important de noter que Vue 2.2.0 est également fourni avec provide / inject
qu'il n'était pas recommandé d'utiliser dans le code d'application générique.
# parentComponent.vue
# childComponent.vue
{{msg}}
# colorComponent.vue
Ceci est un exemple d'accessoires profondément imbriqués!
Ici, nous avons une page de destination avec une liste déroulante contenant une liste de couleurs et nous transmettons la sélection color
à childComponent.vue
comme accessoire. Ce composant enfant a également un msg
prop qui accepte un texte à afficher dans la section modèle. Enfin, ce composant a un composant enfant (colorComponent.vue
) qui accepte un color
prop du composant parent qui est utilisé pour déterminer la classe du texte de ce composant. Ceci est un exemple de transmission de données à travers tous les composants.
Mais avec Vue 3, nous pouvons le faire de manière plus propre et plus courte en utilisant la nouvelle paire Fournir et injecter. Comme son nom l'indique, nous utilisons provide
en tant que fonction ou objet pour rendre les données disponibles à partir d'un composant parent vers l'un de ses composants imbriqués, quelle que soit la profondeur d'imbrication d'un tel composant. Nous utilisons la forme objet lors de la transmission de valeurs codées en dur à provide
comme ça;
# parentComponent.vue
Mais pour les instances où vous devez transmettre une propriété d'instance de composant à provide
, nous utilisons le mode fonction donc c'est possible;
# parentComponent.vue
Puisque nous n'avons pas besoin du color
accessoires dans les deux childComponent.vue
et colorComponent.vue
, nous nous en débarrassons. L'avantage d'utiliser provide
est que le composant parent n'a pas besoin de savoir quel composant a besoin de la propriété qu'il fournit.
Pour utiliser cela dans le composant qui en a besoin dans ce cas, colorComponent.vue
nous faisons cela;
# colorComponent.vue
Ceci est un exemple d'accessoires profondément imbriqués!
Ici, nous utilisons inject
qui prend dans un tableau des variables requises dont le composant a besoin. Dans ce cas, nous n'avons besoin que du color
propriété donc nous ne faisons que passer cela. Après cela, nous pouvons utiliser le color
de la même manière que nous l'utilisons lors de l'utilisation d'accessoires.
Nous pouvons remarquer que si nous essayons de sélectionner une nouvelle couleur à l'aide du menu déroulant, la couleur ne se met pas à jour dans colorComponent.vue
et c'est parce que par défaut les propriétés dans provide
ne sont pas réactifs. Pour résoudre ce problème, nous utilisons computed
méthode.
# parentComponent.vue
Ici, nous importons computed
et passer notre selectedColor
afin qu'il puisse être réactif et se mettre à jour lorsque l'utilisateur sélectionne une couleur différente. Lorsque vous passez une variable à la méthode calculée, elle retourne un objet qui a un value
. Cette propriété détient le valeur de votre variable donc pour cet exemple, il faudrait mettre à jour colorComponent.vue
ressembler à ça;
# colorComponent.vue
Ceci est un exemple d'accessoires profondément imbriqués!
Ici, on change color
à color.value
pour représenter le changement après avoir fait color
réactif en utilisant le computed
méthode. À ce stade, le class
du texte de ce composant changerait toujours à chaque fois selectedColor
changements dans le composant parent.
Téléportation
Il existe des cas dans lesquels nous créons des composants et les plaçons dans une partie de notre application en raison de la logique utilisée par l'application, mais sont destinés à être affichés dans une autre partie de notre application. Un exemple courant de cela serait un modal ou un popup qui est destiné à afficher et à couvrir tout l'écran. Bien que nous puissions créer une solution de contournement pour cela à l'aide de CSS position
propriété sur de tels éléments, avec Vue 3, nous pouvons également utiliser Teleport.
La téléportation nous permet de retirer un composant de sa position d'origine dans un document, par défaut #app
conteneurs Les applications Vue sont encapsulées et déplacées vers n'importe quel élément existant sur la page où elles sont utilisées. Un bon exemple serait d'utiliser Teleport pour déplacer un composant d'en-tête de l'intérieur du #app
div en un header
Il est important de noter que vous ne pouvez vous téléporter que vers des éléments qui existent en dehors du DOM Vue.

Le composant Teleport accepte deux accessoires qui déterminent le comportement de ce composant et ils le sont;
to
Cet accessoire accepte soit un nom de classe, un identifiant, un élément ou un attribut data- *. On peut aussi dynamiser cette valeur en passant un:to
accessoire par opposition àto
et changez dynamiquement l'élément de téléportation.:disabled
Cet accessoire accepte unBoolean
et peut être utilisé pour basculer la fonction de téléportation sur un élément ou un composant. Cela peut être utile pour modifier dynamiquement la position d'un élément.
Un exemple idéal d'utilisation de Teleport ressemble à ceci;
# index.html**
<%= htmlWebpackPlugin.options.title %>
Par défaut index.html
fichier dans votre application Vue, nous ajoutons un header
élément parce que nous voulons téléporter notre composant d'en-tête à ce point dans notre application. Nous avons également ajouté une classe à cet élément pour le style et pour faciliter le référencement dans notre composant Teleport.
# Header.vue **
Vue 3 🥳
Ici, nous créons le composant d'en-tête et ajoutons un logo avec un lien vers la page d'accueil de notre application. Nous ajoutons également le composant Teleport et donnons le to
prop une valeur de header
car nous voulons que ce composant soit rendu à l'intérieur de cet élément. Enfin, nous importons ce composant dans notre application;
# App.vue
Dans ce fichier, nous importons le composant d'en-tête et le plaçons dans le modèle afin qu'il soit visible dans notre application.
Maintenant, si nous inspectons l'élément de notre application, nous remarquerons que notre composant d'en-tête est à l'intérieur du header
élément;

Fragments
Avec Vue 2.x, il était impossible d'avoir plusieurs éléments racine dans le template
de votre fichier et comme solution de contournement, les développeurs ont commencé à encapsuler tous les éléments dans un élément parent. Bien que cela ne semble pas être un problème grave, il existe des cas où les développeurs souhaitent rendre un composant sans conteneur entourant ces éléments, mais doivent se contenter de cela.
Avec Vue 3, une nouvelle fonctionnalité appelée Fragments a été introduite et cette fonctionnalité permet aux développeurs d'avoir plusieurs éléments dans leur fichier de modèle racine. Donc, avec Vue 2.x, voici à quoi ressemblerait un composant de conteneur de champ d'entrée;
# inputComponent.vue
Ici, nous avons un composant d'élément de formulaire simple qui accepte deux accessoires, label
et type
, et la section de modèle de ce composant est enveloppée dans un div. Ce n'est pas nécessairement un problème, mais si vous voulez que l'étiquette et le champ de saisie soient directement à l'intérieur de votre form
élément. Avec Vue 3, les développeurs peuvent facilement réécrire ce composant pour ressembler à ceci;
# inputComponent.vue
Avec un seul nœud racine, les attributs sont toujours attribués au nœud racine et sont également appelés Attributs non accessoires. Ce sont des événements ou des attributs transmis à un composant qui n'ont pas de propriétés correspondantes définies dans props
ou emits
. Des exemples de tels attributs sont class
et id
. Il est cependant nécessaire de définir explicitement à quels éléments d'un composant de nœud multi-racine doit être attribué.
Voici ce que cela signifie en utilisant le inputComponent.vue
d'en haut;
- Lors de l'ajout
class
à ce composant dans le composant parent, il faut spécifier quel composant celaclass
être attribué autrement, l'attribut n'a aucun effet.
Lorsque vous faites quelque chose comme ça sans définir où les attributs doivent être attribués, vous obtenez cet avertissement dans votre console;

Et le border
n'a aucun effet sur le composant;

- Pour résoudre ce problème, ajoutez un
v-bind="$attrs"
sur l'élément sur lequel vous souhaitez que ces attributs soient distribués;
Ici, nous disons à Vue que nous voulons que les attributs soient distribués au label
élément qui signifie que nous voulons le awesome__class
pour y être appliquée. Maintenant, si nous inspectons notre élément dans le navigateur, nous verrons que la classe a maintenant été ajoutée à label
et donc une bordure est maintenant autour de l'étiquette.

API globale
Il n'était pas rare de voir Vue.component
ou Vue.use
dans main.js
fichier d'une application Vue. Ces types de méthodes sont connus comme des API globales et il y en a un certain nombre dans Vue 2.x. L'un des défis de cette méthode est qu'elle rend impossible d'isoler certaines fonctionnalités sur une instance de votre application (si vous avez plus d'une instance dans votre application) sans que cela n'affecte les autres applications, car elles sont toutes montées sur Vue. C'est ce que je veux dire;
Vue.directive('focus', {
inserted: el => el.focus()
})
Vue.mixin({
/* ... */
})
const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })
Pour le code ci-dessus, il est impossible d'indiquer que la directive Vue soit associée à app1
et le Mixin avec app2
mais au lieu de cela, ils sont tous deux disponibles dans les deux applications.
Vue 3 est livré avec une nouvelle API globale pour tenter de résoudre ce type de problème avec l'introduction de createApp
. Cette méthode retourne une nouvelle instance d'une application Vue. Une instance d'application expose un sous-ensemble des API globales actuelles. Avec cela, toutes les API (composant, mixin, directive, utilisation, etc.) qui mutent Vue
de Vue 2.x vont maintenant être déplacées vers des instances d'application individuelles et maintenant, chaque instance de votre application Vue peut avoir des fonctionnalités qui leur sont uniques sans affecter les autres applications existantes.
Maintenant, le code ci-dessus peut être réécrit comme;
const app1 = createApp({})
const app2 = createApp({})
app1.directive('focus', {
inserted: el => el.focus()
})
app2.mixin({
/* ... */
})
Il est cependant possible de créer des fonctionnalités que vous souhaitez partager entre toutes vos applications et cela peut être fait en utilisant une fonction d'usine.
API d'événements
L’une des méthodes les plus couramment adoptées par les développeurs pour transmettre des données entre des composants qui n’ont pas de relation parent-enfant autre que l’utilisation de Vuex Store est l’utilisation du bus d’événements. L'une des raisons pour lesquelles cette méthode est courante est la facilité avec laquelle il est possible de la démarrer;
# eventBus.js
const eventBus = new Vue()
export default eventBus;
Après cela, la prochaine chose serait d'importer ce fichier dans main.js
pour le rendre disponible dans le monde entier dans notre application ou pour l'importer dans les fichiers dont vous avez besoin;
# main.js
import eventBus from 'eventBus'
Vue.prototype.$eventBus = eventBus
Maintenant, vous pouvez émettre des événements et écouter les événements émis comme celui-ci;
this.$eventBus.$on('say-hello', alertMe)
this.$eventBus.$emit('pass-message', 'Event Bus says Hi')
Il y a beaucoup de base de code Vue qui est remplie de code comme celui-ci. Cependant, avec Vue 3, ce serait impossible à faire car $on
, $off
, et $once
ont tous été supprimés mais $emit
est toujours disponible car les composants enfants doivent émettre des événements vers leurs composants parents. Une alternative à cela serait d'utiliser provide / inject
ou l'une des bibliothèques tierces recommandées.
Conclusion
Dans cet article, nous avons expliqué comment vous pouvez transmettre des données d'un composant parent à un composant enfant profondément imbriqué à l'aide du provide / inject
paire. Nous avons également examiné comment nous pouvons repositionner et transférer des composants d'un point de notre application à un autre. Une autre chose que nous avons examinée est le composant de nœud multi-racine et comment nous assurer que nous distribuons les attributs afin qu'ils fonctionnent correctement. Enfin, nous avons également couvert les modifications apportées à l'API Events et à l'API globale.
Autres ressources
- «JavaScript Factory Functions with ES6 +», Eric Elliott, Medium
- «Utilisation du bus d'événements pour partager des accessoires entre des composants Vue», Kingsley Silas, CSS-Tricks
- Utilisation de plusieurs téléports sur la même cible, Vue.js Docs
- Attributs non-prop, documentation Vue.js
- Travailler avec la réactivité, Docs Vue.js
teleport
, Documents Vue.js- Fragments, documentation Vue.js
- Syntaxe 2.x, documentation Vue.js
