了解 Vue 組合 API 中的插槽-js教程-PHP中文網

Understanding Slots in Vue ith Composition API

插槽是 Vue 中的一種強大機制，它使元件能夠定義可由父元件自訂的內容區域。這提高了建置 UI 元件的可重複使用性和靈活性。 Vue 3 提供兩種主要插槽類型：

Normal Slots：提供一個簡單的方法將父元件的內容注入到子元件的模板中。
範圍插槽：透過將資料（範圍）從子元件傳遞到插槽內容，允許進行更高級的自訂，從而實現基於父資料和子資料的動態渲染。

在 Vue 3 中，槽可讓您透過提供將內容傳遞到子元件的方式來建立靈活的元件。 Composition API 增強了我們使用插槽的方式，使其更加直覺和強大。

什麼是老虎機？

插槽是一種在元件中定義佔位符內容的方法，在使用元件時可以用自訂內容填入該佔位符內容。它們有助於創建可重複使用和可自訂的元件。

老虎機類型

預設插槽：最常見的類型，它允許您傳遞沒有任何特定名稱的內容。
命名插槽：允許您使用唯一的名稱指定不同的插槽，從而實現更複雜的佈局。
作用域插槽：它們提供了一種使用插槽將資料從子元件公開到父元件的方法。透過 Composition API 使用槽

將插槽與組合 API 一起使用

以下是如何使用 Composition API 在 Vue 3 元件中定義和使用槽：
預設插槽範例

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

登入後複製

用法：

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

登入後複製

命名插槽

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

登入後複製

用法：

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

登入後複製

範圍插槽

作用域插槽可讓您將資料從子元件傳遞回父元件。

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

登入後複製

用法：

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

登入後複製

範例：Vue 3 中帶有插槽的食品交付

讓我們使用 Vue 3 以及 Composition API 和 slot 建立一個簡單的食品配送應用程式。此範例將展示一個主要的 FoodDelivery 元件，該元件使用插槽來顯示食品清單以及頁首和頁尾。

第 1 步：建立主要元件

這是 FoodDelivery 組件，它接受頁首、食物項目和頁腳的命名槽。

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

登入後複製

第 2 步：創建食品組件

接下來，讓我們建立一個簡單的 FoodItem 元件來代表各個食品。

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

登入後複製

第 3 步：使用組件

現在，讓我們將所有內容放在使用 FoodDelivery 和 FoodItem 元件的父元件中。

讓我解釋一下

FoodDelivery 組件：該組件可作為我們的食品配送服務的佈局。它接受三個槽：標題、食品的預設槽和頁腳。
FoodItem 組件：這代表單一食品。它以名稱和價格作為道具，並具有模擬將商品添加到購物車的方法。

應用程式元件：這是將所有內容聚集在一起的父元件。它使用 FoodDelivery 元件，並用歡迎訊息、FoodItem 元件清單和感謝訊息填充插槽。

使用案例

自訂清單：作用域插槽非常適合建立清單元件，其中每個項目都可以根據其屬性具有不同的渲染邏輯。子元件可以將專案資料傳遞到插槽，父元件可以使用作用域插槽為每個專案定義範本。 (BasePaginated.vue)
條件渲染： 作用域插槽可以根據子元件提供給插槽的資料進行選擇性渲染。例如，您可以有條件地在槽內容中顯示訊息或錯誤狀態。
複雜佈局：作用域插槽有助於創建更複雜的佈局，其中佈局的不同部分可以由父組件自定義，同時允許子組件使用作用域注入特定內容或功能。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

登入後複製

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

登入後複製

高級注意事項

命名作用域插槽：您可以為作用域插槽指派名稱（例如...），使您能夠在單一子元件中擁有多個作用域插槽，並在父元件中按名稱引用它們。
槽函數：在 Vue 2 中，槽在子元件中以 $slots 存取。 Vue 3 使用 $scopedSlots 提供了一種更具反應性的方法，這些函數提供對插槽內容的存取。這允許在子元件內進行動態槽操作和條件渲染。

讓我們增強作用域插槽範例，使其更清晰、更實用。此範例將示範如何使用作用域槽將專案資料從子元件傳遞到父元件，從而實現靈活的渲染。

第 1 步：建立 ItemList 元件

此元件將顯示項目列表，並使用作用域插槽來允許父級自訂每個項目的渲染方式。

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

登入後複製

步驟 2：將 ItemList 元件與作用域槽一起使用

現在，讓我們建立一個使用 ItemList 元件的父元件，並提供一個自訂模板，用於使用作用域插槽渲染每個項目。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

登入後複製