El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Props i esdeveniments personalitzats

Següent ►
►

En aquest tema, aprendrem sobre dos conceptes fonamentals per a la comunicació entre components en Vue.js: les props i els esdeveniments personalitzats. Aquests conceptes ens permeten passar dades i comunicar esdeveniments entre components pare i fill, facilitant la creació d'aplicacions modulars i reutilitzables.

Props

Què són les props?

Les props (abreviatura de "properties") són una manera de passar dades des d'un component pare a un component fill. Les props es defineixen en el component fill i es passen com a atributs en el component pare.

Definint props en un component fill

Per definir props en un component fill, utilitzem la propietat props dins de l'objecte de configuració del component. Aquí teniu un exemple:

// ComponentFill.vue
<template>
  <div>
    <h1>{{ titol }}</h1>
    <p>{{ missatge }}</p>
  </div>
</template>

<script>
export default {
  name: 'ComponentFill',
  props: {
    titol: String,
    missatge: String
  }
}
</script>

Passant props des del component pare

Per passar props des del component pare, simplement afegim els atributs corresponents en el component fill dins del template del component pare:

// ComponentPare.vue
<template>
  <div>
    <ComponentFill titol="Hola, món!" missatge="Aquest és un missatge passat com a prop." />
  </div>
</template>

<script>
import ComponentFill from './ComponentFill.vue';

export default {
  name: 'ComponentPare',
  components: {
    ComponentFill
  }
}
</script>

Validació de props

Vue.js permet validar les props per assegurar-nos que les dades passades són del tipus esperat. Podem definir el tipus de dades, si és obligatori i valors per defecte:

props: {
  titol: {
    type: String,
    required: true
  },
  missatge: {
    type: String,
    default: 'Missatge per defecte'
  }
}

Esdeveniments personalitzats

Què són els esdeveniments personalitzats?

Els esdeveniments personalitzats permeten que un component fill enviï missatges al component pare. Això és útil quan el component fill necessita notificar el component pare sobre alguna acció o canvi d'estat.

Emissió d'esdeveniments des del component fill

Per emetre un esdeveniment des del component fill, utilitzem el mètode $emit. Aquí teniu un exemple:

// ComponentFill.vue
<template>
  <div>
    <button @click="notificarPare">Notificar Pare</button>
  </div>
</template>

<script>
export default {
  name: 'ComponentFill',
  methods: {
    notificarPare() {
      this.$emit('esdevenimentPersonalitzat', 'Dades de l\'esdeveniment');
    }
  }
}
</script>

Escoltant esdeveniments en el component pare

Per escoltar esdeveniments en el component pare, utilitzem la directiva v-on o la seva forma abreujada @:

// ComponentPare.vue
<template>
  <div>
    <ComponentFill @esdevenimentPersonalitzat="gestionarEsdeveniment" />
  </div>
</template>

<script>
import ComponentFill from './ComponentFill.vue';

export default {
  name: 'ComponentPare',
  components: {
    ComponentFill
  },
  methods: {
    gestionarEsdeveniment(dades) {
      console.log('Esdeveniment rebut amb dades:', dades);
    }
  }
}
</script>

Exercicis pràctics

Exercici 1: Passant props

  1. Crea un component fill que mostri un nom i una edat passats com a props.
  2. Crea un component pare que passi el nom i l'edat al component fill.

Solució

// ComponentFill.vue
<template>
  <div>
    <h1>Nom: {{ nom }}</h1>
    <p>Edat: {{ edat }}</p>
  </div>
</template>

<script>
export default {
  name: 'ComponentFill',
  props: {
    nom: String,
    edat: Number
  }
}
</script>
// ComponentPare.vue
<template>
  <div>
    <ComponentFill nom="Joan" edat="30" />
  </div>
</template>

<script>
import ComponentFill from './ComponentFill.vue';

export default {
  name: 'ComponentPare',
  components: {
    ComponentFill
  }
}
</script>

Exercici 2: Emissió d'esdeveniments

  1. Crea un component fill amb un botó que emeti un esdeveniment personalitzat quan es fa clic.
  2. Crea un component pare que escolti l'esdeveniment i mostri un missatge en la consola.

Solució

// ComponentFill.vue
<template>
  <div>
    <button @click="notificarPare">Notificar Pare</button>
  </div>
</template>

<script>
export default {
  name: 'ComponentFill',
  methods: {
    notificarPare() {
      this.$emit('esdevenimentPersonalitzat', 'Botó clicat!');
    }
  }
}
</script>
// ComponentPare.vue
<template>
  <div>
    <ComponentFill @esdevenimentPersonalitzat="gestionarEsdeveniment" />
  </div>
</template>

<script>
import ComponentFill from './ComponentFill.vue';

export default {
  name: 'ComponentPare',
  components: {
    ComponentFill
  },
  methods: {
    gestionarEsdeveniment(missatge) {
      console.log('Esdeveniment rebut amb missatge:', missatge);
    }
  }
}
</script>

Conclusió

En aquesta secció, hem après com utilitzar les props per passar dades des de components pare a components fill i com utilitzar esdeveniments personalitzats per comunicar-se en la direcció oposada. Aquests conceptes són fonamentals per a la creació de components modulars i reutilitzables en Vue.js. En la propera secció, explorarem els slots, una altra eina poderosa per a la composició de components.

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats