DevTools - ClicAndCode

Définir des props

Facile

export default {
  props: {
    titre: String
  }
}

Définir un composant simple

Facile

// MonComposant.vue
<template>
  <p>Ceci est un composant.</p>
</template>

Écouter un événement personnalisé

Intermédiaire

<BlogPost @augmenter-taille-texte="postFontSize += $event" />

Émettre un événement (emit)

Intermédiaire

this.$emit('augmenter-taille-texte', 0.1)

Enregistrer et utiliser un composant

Facile

import MonComposant from './MonComposant.vue'

// ... dans un autre composant
<MonComposant />

Passer des props

Facile

<BlogPost titre="Mon voyage avec Vue" />

Slots (contenu distribué)

Intermédiaire

<template>
  <button>
    <slot></slot>
  </button>
</template>

Slots nommés

Avancé

<template>
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
</template>

Validation de props

Intermédiaire

props: {
  likes: {
    type: Number,
    required: true
  }
}

📚 Cheatsheet