• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/04/2021

Créez des composants réutilisables avec Vue.js

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Compétences évaluées

  • Créer des composants réutilisables dans Vue.js
  • Question 1

    Si vous souhaitez passer des données à un composant enfant, quelle technique devez-vous utiliser ?

    • Propriétés calculées

    • Methods

    • Props

    • Data store

  • Question 2

    Il y a actuellement un bug dans notre application. Comme vous le voyez ci-dessous, un composant affiche différents types de données dans le message, tels que des arrays et des objets.

    <template>
    <p>{{ message }}</p>
    </template>
    <script>
    export default {
    props: ['message']
    }
    </script>

    Quel est le meilleur moyen d'éviter ce genre de problème ?

    • Définir la propriété  required  dans la prop.

    • Définir le type de propriété avec une valeur  String.

    • Définir une propriété  default  dans la prop.

    • Définir un nom de prop personnalisé qui indique aux autres développeurs de n'utiliser que des chaînes de caractères.

  • Question 3

    Un développeur essaie d'utiliser les techniques SCSS dans le bloc de code ci-dessous.

    <template>
    <div class="form-wrapper">
    <label class="form-label">Nom du formulaire</label>
    <input class="form-input" type="text" />
    </div>
    </template>
    <style>
    .form {
    &-wrapper { margin: 25px 0; }
    &-label { font-size: 1.2rem; }
    &-input { padding: 10px 5px; }
    }
    </style>

    Qu’a-t-il mal fait ?

    • Il doit ajouter l'attribut  scss  au bloc  <style>.  

    • Il doit ajouter l'attribut  lang="scss"  au bloc  <style>.

    • Il doit envelopper les styles dans un bloc  <scss>.

    • Il doit ajouter l'attribut  preprocessor="scss"  au bloc  <style>.