Vue中如何使用v-slot具名插槽

PHPz

發布： 2023-06-11 13:33:16

原創

1607 人瀏覽過

Vue是一個流行的JavaScript框架，尤其在建立前端單頁應用程式時非常受歡迎。 Vue提供了各種內建功能和API，其中之一是使用v-slot具名插槽。在本文中，我們將了解v-slot具名插槽的概念，並透過提供實際範例來說明如何使用它們。

什麼是v-slot具名插槽？

v-slot具名插槽是Vue中更靈活、更強大的插槽機制。其基本概念是為一個元件提供一個額外的插入點（即插槽），以便您可以在元件內部插入自己的內容。 v-slot具名插槽可讓您為插槽指定名稱，以便在元件範本內部引用它們。

在Vue 2.x中，使用v-slot指令定義插槽內容，在父元件運作時將其傳遞給子元件。在Vue 3.x中，v-slot指令改名為#，但語法不變。

使用v-slot具名插槽

讓我們透過一個實際範例示範如何使用v-slot具名插槽。

我們將建立一個TodoList元件，該元件將顯示待辦事項條目。使用v-slot具名插槽，我們建立兩個插槽-一個用於顯示待辦事項清單中的單一項目的內容，另一個用於顯示清單結束後的內容。

以下是TodoList元件模板的範例程式碼：

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <slot name="item" v-for="item in items" :item="item"></slot>
    </ul>
    <slot name="after"></slot>
  </div>
</template>

登入後複製

在上面的程式碼中，我們使用v-for指令循環遍歷items數組，然後使用slot指令將v-for元素動態地插入到“item”插槽中。類似地，我們在清單的結尾定義了名為「after」的插槽，以用於顯示清單結束後的內容。

現在，讓我們來看一個使用TodoList元件的範例。以下是父元件範本的範例程式碼：

<template>
  <div>
    <todo-list :title="title" :items="items">
      <template v-slot:item="props">
        <li>{{ props.item }}</li>
      </template>
      <template v-slot:after>
        <p>List ended.</p>
      </template>
    </todo-list>
  </div>
</template>

<script>
import TodoList from './TodoList.vue';

export default {
  name: 'App',
  components: {
    TodoList,
  },
  data() {
    return {
      title: 'My Todo List',
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
};
</script>

登入後複製

在上面的程式碼中，我們先透過import指令匯入TodoList元件。然後，我們在父元件模板中使用todo-list元素並透過v-bind指令將資料傳遞給TodoList元件。最後，我們使用具名插槽將自訂的項目和結束內容插入TodoList元件中。