8. proyecto [vuejs-06]: diseño de una vista con ranuras

8.1. El script principal [main.js]

El script principal [main.js] no sufre cambios.

8.2. El componente principal [App]

El código del componente [App] es el siguiente:


<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-06] : mise en page avec des slots</h4>
      </b-alert>
      <Content />
    </b-card>
  </div>
</template>


<script>
  import Content from './components/Content'
  export default {
    name: "app",
    // componentes utilizados
    components: {
      Content
    }
  };
</script>

El componente [App] introduce un nuevo componente denominado [Content] (líneas 7, 14, 19).

8.3. El componente [Layout]

El componente [Layout] sirve para definir un diseño de las vistas de la aplicación:


<template>
  <!-- línea -->
  <b-row>
    <!-- campo de tres columnas -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- área de nueve columnas -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>

<script>
  export default {
    name: "patron",
    // parámetros
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

Comentarios

El componente [Layout] define una única línea (líneas 3-12). Esta se divide en dos columnas:
- una columna compuesta por 3 columnas Bootstrap (líneas 5-7);
- una columna compuesta por 9 columnas Bootstrap (líneas 9-11);
línea 5: la presencia de la columna de la izquierda (líneas 5-7) depende del valor del parámetro [left], definido en la propiedad [props] del componente (líneas 20-22);
línea 9: la presencia de la columna derecha (líneas 9-11) depende del valor del parámetro [right], definido en la propiedad [props] del componente (líneas 23-25);
los valores de los parámetros [left, right] deben ser fijados por un componente padre del componente [Layout];
línea 6: no se establece el contenido de la columna de la izquierda. Simplemente se le da un nombre a esta columna con la etiqueta <slot>. Aquí se llamará [slot-left]. Un componente que utilice el componente [Content] deberá indicar qué desea colocar en el área denominada [slot-left];
línea 10: la columna de la derecha se llamará [slot-right];

8.4. El componente [Right]

El componente [Right] es el siguiente:


<template>
  <!-- un mensaje en una alerta de tipo advertencia -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- script -->
<script>
  export default {
    name: "droite",
    // parámetros
    props: {
      msg: String
    }
  };
</script>

líneas 3-5: el componente [Right] muestra un mensaje en una alerta de tipo [warning]. Este mensaje [msg] se define como un parámetro del componente, línea 14. Por lo tanto, el componente padre deberá asignarle un valor;

8.5. El componente [Left]

El componente [Left] es el siguiente:


<template>
  <!-- un mensaje en una alerta de tipo «primary» -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>

<!-- script -->
<script>
  export default {
    name: "gauche",
    // parámetros
    props: {
      msg: String
    }
  };
</script>

líneas 3-5: el componente [Left] muestra un mensaje en una alerta de tipo [primary]. Este mensaje [msg] se define como un parámetro del componente, línea 14. Por lo tanto, el componente padre deberá asignarle un valor;

8.6. El componente [Content]

Recordemos que el componente [Content] es el componente mostrado por la vista principal [App.vue]:


<template>
  <div>
    <!-- columnas izquierda y derecha rellenadas -->
    <Layout :left="true" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli" />
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli" />
    </Layout>
    <!-- columna izquierda vacía, columna derecha rellenada -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- columna izquierda rellenada, columna derecha ausente -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- columna izquierda presente pero sin rellenar, columna derecha rellenada -->
    <Layout :left="true" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] présent mais vide" />
    </Layout>
  </div>
</template>

<!-- script -->
<script>
  import Layout from "./Layout";
  import Left from "./Left";
  import Right from "./Right";
  export default {
    name: "contenu",
    // componentes
    components: {
      Layout,
      Left,
      Right
    }
  };
</script>

Representación visual

Comentarios

El componente [Layout] se utiliza 4 veces (líneas 4-7, 9-11, 13-15, 17-19). Si recordamos que el componente [Layout] define una línea, el [template] anterior define cuatro líneas. Recordemos también que la línea del [Layout] define dos columnas:
- una columna llamada [slot-left] que ocupa las tres columnas Bootstrap de la izquierda;
- una columna llamada [slot-Right] que ocupa las nueve columnas de Bootstrap de la derecha;
líneas 4-7: define una fila [1] en la que el componente [Left] ocupa la columna [slot-left] y el componente [Right] ocupa la columna [slot-right];
líneas 9-11: define una línea [2] en la que no se muestra la columna [slot-left] y el componente [Right] ocupa la columna [slot-right];
líneas 13-15: define una línea [3] en la que no se muestra la columna [slot-right] y el componente [Left] ocupa la columna [slot-left];
líneas 17-19: define una fila [4] en la que se muestra la columna [slot-left], pero no se rellena, y el componente [Right] ocupa la columna [slot-right];

Al final, el componente [Layout] sirvió de diseño para el componente [Content].