Vue 3: Componenti Avanzati

I componenti sono i mattoni fondamentali delle applicazioni Vue. Imparare a comunicarli tra loro è essenziale.

Props e validazione

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  status: {
    type: String,
    validator: (value) => ['success', 'warning', 'error'].includes(value)
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

Emit events

<script setup>
const emit = defineEmits({
  update: (payload) => {
    if (payload.id && payload.value) {
      return true
    }
    console.warn('Invalid update payload')
    return false
  }
})

const handleUpdate = () => {
  emit('update', { id: 1, value: 'new value' })
}
</script>

Provide / Inject

Per comunicazione tra componenti annidati:

<!-- Parent.vue -->
<script setup>
import { provide } from 'vue'

provide('theme', {
  dark: true,
  colors: { primary: '#3498db' }
})
</script>

<!-- Child.vue -->
<script setup>
import { inject } from 'vue'

const theme = inject('theme')
</script>

Slots avanzati

<!-- Modal.vue -->
<template>
  <div class="modal">
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

Conclusione

I componenti Vue sono potenti e flessibili. Padroneggiare props, emits e slots è fondamentale per costruire applicazioni scalabili.