8. 项目 [vuejs-06]：使用插槽布局视图

8.1. 主脚本 [main.js]

主脚本 [main.js] 保持不变。

8.2. 主组件 [App]

[App] 组件的代码如下：


<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",
    // composants utilisés
    components: {
      Content
    }
  };
</script>

[App] 组件引入了一个名为 [Content] 的新组件（第 7、14、19 行）。

8.3. [Layout] 组件

[Layout] 组件用于定义应用程序视图的布局：


<template>
  <!-- line -->
  <b-row>
    <!-- three-column zone -->
    <b-col cols="3" v-if="left">
      <slot name="slot-left" />
    </b-col>
    <!-- nine-column zone -->
    <b-col cols="9" v-if="right">
      <slot name="slot-right" />
    </b-col>
  </b-row>
</template>
 
<script>
  export default {
    name: "patron",
    // paramètres
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

[Layout] 组件定义了一行（第 3–12 行）。该行被划分为两列：
- 由 3 个 Bootstrap 列组成的列（第 5–7 行）；
- 一个由 9 个 Bootstrap 列组成的列（第 9–11 行）；
第 5 行：左侧列（第 5–7 行）是否存在取决于组件 [props] 属性中定义的 [left] 参数的值（第 20–22 行）；
第 9 行：右侧列（第 9–11 行）的显示取决于组件 [props] 属性中定义的 [right] 参数的值（第 23–25 行）；
[left, right] 参数的值必须由 [Layout] 组件的父组件设置；
第 6 行：左侧栏的内容尚未指定。我们仅通过 <slot> 标签为该栏命名。此处，它将被称为 [slot-left]。使用 [Content] 组件的组件必须指定其希望放置在名为 [slot-left] 的区域中的内容；
第 10 行：右侧栏将命名为 [slot-right]；

8.4. [Right]组件

[Right] 组件如下所示：


<template>
  <!-- a message in a warning-type alert -->
  <b-alert show variant="warning" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>
 
<!-- script -->
<script>
  export default {
    name: "droite",
    // paramètres
    props: {
      msg: String
    }
  };
</script>

第 3–5 行：[Right] 组件在 [warning] 提示框中显示一条消息。该消息 [msg] 在第 14 行被定义为组件参数。因此，父组件必须为其提供一个值；

8.5. [Left] 组件

[Left] 组件如下所示：


<template>
  <!-- a message in a primary alert -->
  <b-alert show variant="primary" align="center">
    <h4>{{msg}}</h4>
  </b-alert>
</template>
 
<!-- script -->
<script>
  export default {
    name: "gauche",
    // paramètres
    props: {
      msg: String
    }
  };
</script>

第 3–5 行：[Left] 组件在 [primary] 警报中显示一条消息。该消息 [msg] 在第 14 行被定义为组件参数。因此，父组件必须为其提供一个值；

8.6. [Content] 组件

请注意，[Content] 组件是主视图 [App.vue] 所显示的组件：


<template>
  <div>
    <!-- colonnes gauche et droite remplies -->
    <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>
    <!-- colonnes gauche basente. colonne droite remplie -->
    <Layout :left="false" :right="true">
      <Right slot="slot-right" msg="slot [slot-right] présent et rempli, slot [slot-left] absent" />
    </Layout>
    <!-- colonnes gauche remplie, colonne droite absente -->
    <Layout :left="true" :right="false">
      <Left slot="slot-left" msg="slot [slot-left] présent et rempli, slot [slot-right] absent" />
    </Layout>
    <!-- colonnes gauche présente mais pas remplie, colonne droite remplie -->
    <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",
    // composants
    components: {
      Layout,
      Left,
      Right
    }
  };
</script>

可视化渲染

注释

[Layout] 组件被使用了 4 次（第 4–7 行、第 9–11 行、第 13–15 行、第 17–19 行）。由于 [Layout] 组件定义了 1 行，因此上方的 [template] 定义了 4 行。此外，[Layout] 行定义了两个列：
- 一个名为 [slot-left] 的列，占据 Bootstrap 的 3 个左侧列；
- 一个名为 [slot-right] 的列，占用 Bootstrap 的 9 个右侧列；
第 4–7 行：定义一个 [1] 行，其中 [Left] 组件占据 [slot-left] 列，[Right] 组件占据 [slot-right] 列；
第 9–11 行：定义了一个 [2] 行，其中 [slot-left] 列不显示，而 [Right] 组件占据 [slot-right] 列；
第 13–15 行：定义一行 [3]，其中 [slot-right] 列不显示，而 [Left] 组件占据 [slot-left] 列；
第 17–19 行：定义一行 [4]，其中 [slot-left] 列显示 [:left=’true’] 但未填充，而 [Right] 组件占据 [slot-right] 列；

最终，[Layout] 组件作为 [Content] 组件的布局。