[Day29]元件客製化區域

2023 iThome 鐵人賽

DAY 29

自我挑戰組

從零開始Vue(View)系列第 29 篇

15th鐵人賽

yuuu

2023-10-03 18:50:29

233 瀏覽

分享至

當想要在頁面中的不同區域顯示不同內容，就可以利用slot這個功能。這個功能除了能分割畫面，也允許父元件將子元件的內容插入到特定的位置，可以讓我們更靈活的設計和重用元件（減少程式重複）。

使用<slot>元素來指定出現的位置。有默認插槽或具名插槽：

默認插槽：當父元件不提供特定內容時，子元件可以顯示默認內容。（<slot></slot>）

<!-- 父元件模板 -->
<template>
  <div>
    <h1>父元件</h1>
    <!-- 插槽，帶有默認內容 -->
    <slot>
      <p>這是默認內容，如果父元件未提供插槽內容，將顯示這段文字。</p>
    </slot>
  </div>
</template>

具名插槽：父元件可以定義多個具名插槽，以便子元件將內容插入到父元件的不同區域。
（如：<slot name="child-content"></slot>）

<!-- 父元件模板 -->
<template>
  <div>
    <h1>父元件</h1>
    <!-- 具名插槽 -->
    <slot name="child-content"></slot>
  </div>
</template>

<!-- 子元件模板 -->
<template>
  <div>
    <h2>子元件</h2>
    <!-- 插入內容到父元件的具名插槽中 -->
    <p slot="child-content">這是子元件的內容。</p>
  </div>
</template>

範例：
目標：將頁面分成兩個部分，並顯示不同內容。
SplitLayout.vue

<template>
  <div id="app">
    <div class="split">
      <!-- 左側部分 -->
      <div class="left">
        <h2>左側內容</h2>
        <slot name="left"></slot>
      </div>

      <!-- 右側部分 -->
      <div class="right">
        <h2>右側內容</h2>
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SplitLayout",
};
</script>

<style scoped>
.split {
  display: flex;
}

.left,
.right {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
}

.left {
  background-color: lightblue;
}

.right {
  background-color: lightgreen;
}
</style>

html

<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>

main.js

import { createApp } from "vue";
import SplitLayout from "./SplitLayout.vue";

var app = createApp({});

app.component("split-layout", SplitLayout);

app.mount("#app");

執行結果：