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

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>.

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

Compétences évaluées

Question 1

Question 2

Question 3