Component Basics
Rappel
u Découper l’interface en plusieurs composants
u Chaque composant a son propre HTML, CSS, JS
Confidential - Not for Public Consumption or Distribution
Autres fonctionnalités
u Utilisation d’un composant dans un autre composant (relation parent/enfant)
Confidential - Not for Public Consumption or Distribution
Autres fonctionnalités
u Passer des données d’un parent à un composant enfant
Confidential - Not for Public Consumption or Distribution
Autres fonctionnalités
u Lever des évènements en tant qu’enfant / Ecouter des évènements d’enfant en
tant que parent (emit et direction v-on)
Confidential - Not for Public Consumption or Distribution
Autres fonctionnalités
u Appeler un composant de manière dynamique (en utilisant :is )
Confidential - Not for Public Consumption or Distribution
Règles d’écriture
u Insensibilité de la case
u Les navigateurs sont insensibles à la case, donc les noms des composants et les
noms des propriétés,etc doivent avoir leurs équivalents en kebab-case
u Le composant enfant définit les props en camelCase, mais on les appelle en kebab-
case (pour respecter la convention html)
Confidential - Not for Public Consumption or Distribution
Règles d’écriture
u Balises auto-fermantes
u Il faut respecter les conventions HTML de manière générale, donc on devrait
toujours inclure les fermetures de balises explicites quand on écrit sur le DOM
directement (‹my-component></my-component>).
u Par contre dans un template .vue, [Link] permet une balise auto-fermantes
(‹MyComponent />) car il l'a retranscris lui même en fermeture explicites.
Confidential - Not for Public Consumption or Distribution
Règles d’écriture
u Restriction de placement des éléments
u Certains éléments HTML, comme <ul>, <ol>, <table> et <select> ont des
restrictions concernants quels élements ils peuvent contenir.
u Et a l'inverse, certains éléments comme <li>, <tr>, et <option> ne peuvent être
qu'à l'intérieur de certains éléments.
u Cela peut causer des problèmes comme ici:
u <blog-post-row> sera relevé comme contenu invalide ce qui peut causer des
erreurs.
u Solution:
u Utiliser l'attribut spécial is pour du component dynamique
Confidential - Not for Public Consumption or Distribution