8. projeto [vuejs-06]: layout de uma visualização com slots

8.1. O script principal [main.js]

O script principal [main.js] permanece inalterado.

8.2. O componente principal [App]

O código do componente [App] é o seguinte:


<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>

O componente [App] introduz um novo componente chamado [Content] (linhas 7, 14, 19).

8.3. O componente [Layout]

O componente [Layout] serve para definir o layout das visualizações do aplicativo:


<template>
  <!-- linha -->
  <b-row>
    <!-- campo com três colunas -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- área com nove colunas -->
    <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>

Comentários

o componente [Layout] define uma única linha (linhas 3-12). Esta é dividida em duas colunas:
- uma coluna composta por 3 colunas do Bootstrap (linhas 5 a 7);
- uma coluna composta por 9 colunas do Bootstrap (linhas 9 a 11);
linha 5: a presença da coluna da esquerda (linhas 5-7) depende do valor do parâmetro [left], definido na propriedade [props] do componente (linhas 20-22);
linha 9: a presença da coluna direita (linhas 9-11) depende do valor do parâmetro [right], definido na propriedade [props] do componente (linhas 23-25);
os valores dos parâmetros [left, right] devem ser definidos por um componente pai do componente [Layout];
linha 6: não se define o conteúdo da coluna da esquerda. Simplesmente se atribui um nome a essa coluna com a tag <slot>. Aqui, ela se chamará [slot-left]. Um componente que utilize o componente [Content] deverá indicar o que deseja inserir na área denominada [slot-left];
linha 10: a coluna da direita se chamará [slot-right];

8.4. O componente [Right]

O componente [Right] é o seguinte:


<template>
  <!-- uma mensagem em um alerta do tipo “warning” -->
  <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>

linhas 3-5: o componente [Right] exibe uma mensagem em um alerta do tipo [warning]. Essa mensagem [msg] está definida como um parâmetro do componente, linha 14. O componente pai deverá, portanto, atribuir-lhe um valor;

8.5. O componente [Left]

O componente [Left] é o seguinte:


<template>
  <!-- uma mensagem em um alerta do 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>

linhas 3-5: o componente [Left] exibe uma mensagem em um alerta do tipo [primary]. Essa mensagem [msg] está definida como um parâmetro do componente, linha 14. O componente pai deverá, portanto, atribuir-lhe um valor;

8.6. O componente [Content]

Lembramos que o componente [Content] é o componente exibido pela visualização principal [App.vue]:


<template>
  <div>
    <!-- colunas esquerda e direita preenchidas -->
    <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>
    <!-- colunas esquerda vazia, coluna direita preenchida -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- coluna esquerda preenchida, coluna direita ausente -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- coluna esquerda presente, mas não preenchida; coluna direita preenchida -->
    <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>

Representação visual

Comentários

o componente [Layout] é utilizado 4 vezes (linhas 4-7, 9-11, 13-15, 17-19). Se considerarmos que o componente [Layout] define uma linha, o [template] acima define quatro linhas. Lembramos também que a linha do [Layout] define duas colunas:
- uma coluna chamada [slot-left], que ocupa as três colunas do Bootstrap à esquerda;
- uma coluna chamada [slot-Right] que ocupa as 9 colunas do Bootstrap à direita;
linhas 4-7: define uma linha [1], na qual o componente [Left] ocupa a coluna [slot-left] e o componente [Right] ocupa a coluna [slot-right];
linhas 9-11: define uma linha [2], na qual a coluna [slot-left] não é exibida e o componente [Right] ocupa a coluna [slot-right];
linhas 13-15: define uma linha [3], na qual a coluna [slot-right] não é exibida e o componente [Left] ocupa a coluna [slot-left];
linhas 17-19: define uma linha [4], na qual a coluna [slot-left] é exibida como [:left=’true’], mas não preenchida, e o componente [Right] ocupa a coluna [slot-right];

No final, o componente [Layout] serviu de layout para o componente [Content].