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

Comunicació entre components

Següent ►
►

En aquest tema, explorarem com els components de Vue.js poden comunicar-se entre ells. La comunicació entre components és essencial per construir aplicacions complexes i ben organitzades. Aprendrem sobre les diferents maneres de passar dades i esdeveniments entre components pare i fill, així com entre components germans.

Objectius d'aprenentatge

  • Entendre com passar dades dels components pare als components fill utilitzant props.
  • Aprendre a emetre esdeveniments des dels components fill als components pare.
  • Explorar la comunicació entre components germans utilitzant un bus d'esdeveniments o un estat global.

  1. Passar dades amb props

Què són les props?

Les props (abreviatura de "properties") són una manera de passar dades dels components pare als components fill. Les props permeten que els components fill siguin reutilitzables i configurables.

Exemple de props

<!-- Component Pare -->
<template>
  <div>
    <h1>Comunicació entre components</h1>
    <ChildComponent message="Hola des del component pare!" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>
<!-- Component Fill (ChildComponent.vue) -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Explicació

  1. Component Pare: Passa una prop anomenada message al ChildComponent.
  2. Component Fill: Declara la prop message i la mostra en el seu template.

  1. Emetre esdeveniments

Què són els esdeveniments personalitzats?

Els esdeveniments personalitzats permeten que els components fill enviïn informació als components pare. Això es fa mitjançant l'emissió d'esdeveniments des del component fill i la captura d'aquests esdeveniments en el component pare.

Exemple d'esdeveniments personalitzats

<!-- Component Pare -->
<template>
  <div>
    <h1>Comunicació entre components</h1>
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('Esdeveniment rebut:', data);
    }
  }
};
</script>
<!-- Component Fill (ChildComponent.vue) -->
<template>
  <div>
    <button @click="emitEvent">Emet esdeveniment</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Hola des del component fill!');
    }
  }
};
</script>

Explicació

  1. Component Pare: Escolta l'esdeveniment custom-event i executa el mètode handleCustomEvent quan l'esdeveniment és emès.
  2. Component Fill: Emet l'esdeveniment custom-event amb un missatge quan es fa clic al botó.

  1. Comunicació entre components germans

Utilitzant un bus d'esdeveniments

Un bus d'esdeveniments és una instància de Vue que s'utilitza per emetre i escoltar esdeveniments entre components que no tenen una relació pare-fill.

Exemple de bus d'esdeveniments

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
<!-- Component A -->
<template>
  <div>
    <button @click="sendMessage">Envia missatge a Component B</button>
  </div>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hola des del Component A!');
    }
  }
};
</script>
<!-- Component B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message', (data) => {
      this.message = data;
    });
  }
};
</script>

Explicació

  1. eventBus.js: Crea una instància de Vue que actua com a bus d'esdeveniments.
  2. Component A: Emet un esdeveniment message amb un missatge.
  3. Component B: Escolta l'esdeveniment message i actualitza la seva dada message amb el missatge rebut.

Exercicis pràctics

Exercici 1: Passar dades amb props

Crea dos components, ParentComponent i ChildComponent. Passa una prop anomenada title des del ParentComponent al ChildComponent i mostra-la en el ChildComponent.

Solució

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent title="Títol des del component pare" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>
<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
};
</script>

Exercici 2: Emetre esdeveniments

Crea dos components, ParentComponent i ChildComponent. Emet un esdeveniment des del ChildComponent amb un missatge i captura'l en el ParentComponent.

Solució

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @custom-event="handleEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(message) {
      console.log('Missatge rebut:', message);
    }
  }
};
</script>
<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="emitEvent">Emet esdeveniment</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Hola des del component fill!');
    }
  }
};
</script>

Conclusió

En aquesta secció, hem après com els components de Vue.js poden comunicar-se entre ells utilitzant props i esdeveniments personalitzats. També hem explorat com els components germans poden comunicar-se utilitzant un bus d'esdeveniments. Aquests conceptes són fonamentals per construir aplicacions Vue.js ben estructurades i escalables. En el següent mòdul, aprofundirem en l'ús de Vue Router per gestionar la navegació en les nostres aplicacions.

◄ 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