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

Slots

Següent ►
►

Els slots són una característica poderosa de Vue.js que permet als desenvolupadors crear components més flexibles i reutilitzables. Els slots permeten inserir contingut dinàmicament en un component des de l'exterior, proporcionant una manera de personalitzar el contingut d'un component sense modificar el seu codi intern.

Conceptes Clau

  1. Slot Bàsic: Permet inserir contingut en un component.
  2. Slot Nombrat: Permet definir múltiples àrees dins d'un component on es pot inserir contingut.
  3. Slot per Defecte: Contingut que es mostra si no es proporciona cap contingut per al slot.
  4. Slot Scoped: Permet passar dades del component fill al component pare.

Slot Bàsic

Exemple

<!-- Component Pare -->
<template>
  <div>
    <h1>Component Pare</h1>
    <child-component>
      <p>Aquest és el contingut del slot bàsic.</p>
    </child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- Component Fill (ChildComponent.vue) -->
<template>
  <div>
    <h2>Component Fill</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

Explicació

  • El component pare (ParentComponent) inclou el component fill (ChildComponent) i proporciona contingut per al slot.
  • El component fill (ChildComponent) utilitza la directiva <slot></slot> per indicar on s'ha d'inserir el contingut proporcionat pel component pare.

Slot Nombrat

Exemple

<!-- Component Pare -->
<template>
  <div>
    <h1>Component Pare</h1>
    <child-component>
      <template v-slot:header>
        <h2>Aquest és el contingut del slot "header".</h2>
      </template>
      <template v-slot:footer>
        <p>Aquest és el contingut del slot "footer".</p>
      </template>
    </child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- Component Fill (ChildComponent.vue) -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

Explicació

  • El component pare utilitza v-slot:header i v-slot:footer per proporcionar contingut específic per als slots nombrats "header" i "footer".
  • El component fill defineix on s'han d'inserir aquests continguts amb <slot name="header"></slot> i <slot name="footer"></slot>.

Slot per Defecte

Exemple

<!-- Component Pare -->
<template>
  <div>
    <h1>Component Pare</h1>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- Component Fill (ChildComponent.vue) -->
<template>
  <div>
    <h2>Component Fill</h2>
    <slot>
      <p>Aquest és el contingut per defecte del slot.</p>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

Explicació

  • Si el component pare no proporciona cap contingut per al slot, es mostrarà el contingut per defecte definit dins del component fill.

Slot Scoped

Exemple

<!-- Component Pare -->
<template>
  <div>
    <h1>Component Pare</h1>
    <child-component>
      <template v-slot:default="slotProps">
        <p>El valor del slot és: {{ slotProps.value }}</p>
      </template>
    </child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- Component Fill (ChildComponent.vue) -->
<template>
  <div>
    <h2>Component Fill</h2>
    <slot :value="dataValue"></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      dataValue: 'Hola des del component fill!'
    };
  }
};
</script>

Explicació

  • El component fill passa dades al component pare mitjançant l'atribut :value en el slot.
  • El component pare accedeix a aquestes dades utilitzant slotProps.value.

Exercicis Pràctics

Exercici 1: Slot Bàsic

Crea un component Card que utilitzi un slot bàsic per inserir contingut dinàmicament.

Solució

<!-- Card.vue -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Card'
};
</script>

<!-- App.vue -->
<template>
  <div>
    <Card>
      <p>Aquest és el contingut de la targeta.</p>
    </Card>
  </div>
</template>

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

export default {
  components: {
    Card
  }
};
</script>

Exercici 2: Slot Nombrat

Crea un component Layout que utilitzi slots nombrats per definir una capçalera i un peu de pàgina.

Solució

<!-- Layout.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Layout'
};
</script>

<!-- App.vue -->
<template>
  <div>
    <Layout>
      <template v-slot:header>
        <h1>Capçalera del lloc web</h1>
      </template>
      <template v-slot:footer>
        <p>Peu de pàgina del lloc web</p>
      </template>
      <p>Contingut principal del lloc web</p>
    </Layout>
  </div>
</template>

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

export default {
  components: {
    Layout
  }
};
</script>

Conclusió

Els slots són una eina essencial per crear components Vue.js flexibles i reutilitzables. Permeten inserir contingut dinàmicament, definir múltiples àrees de contingut i passar dades entre components. Amb la pràctica, els slots poden millorar significativament la modularitat i la mantenibilitat del teu codi Vue.js.

◄ 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