默認(rèn)插槽用於插入單一內(nèi)容，父組件傳遞的內(nèi)容會(huì)直接填入子組件的 位置；2. 具名插槽通過(guò)name 屬性和v-slot 指令實(shí)現(xiàn)多個(gè)插入點(diǎn)，使內(nèi)容可定向插入子組件的不同區(qū)域；3. 作用域插槽允許子組件通過(guò)插槽prop 向父組件傳遞數(shù)據(jù)，父組件可基於這些數(shù)據(jù)自定義渲染內(nèi)容，從而實(shí)現(xiàn)邏輯與展示分離，插槽是Vue 中實(shí)現(xiàn)內(nèi)容分發(fā)和組件靈活復(fù)用的核心機(jī)制。

Slots in Vue are a powerful feature that let you compose components by injecting content into them from the parent. Think of them as placeholders in a child component that can be filled with markup or content defined in the parent.

They're especially useful when building reusable UI components like modals, cards, or layout wrappers — where the structure is consistent, but the content inside may vary.

1. Default Slots (Single Slot)

The simplest form of a slot is the default slot . You place <slot></slot> in the child component, and any content passed by the parent will go there.

Child Component (ButtonWrapper.vue):

 <template>
  <button class="wrapper">
    <slot></slot>
  </button>
</template>

Parent Component:

 <template>
  <ButtonWrapper>Click me</ButtonWrapper>
</template>

Result:

 <button class="wrapper">Click me</button>

If no content is passed, the slot remains empty — or you can provide fallback content inside the slot.

 <slot>Default text</slot>

2. Named Slots

Sometimes you need multiple insertion points. That's where named slots come in.

You give slots a name using the name attribute, and pass content using the v-slot directive (or # shorthand).

Child Component (Layout.vue):

 <template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- default slot -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

Parent Component:

 <template>
  <Layout>
    <template v-slot:header>
      <h1>Page Title</h1>
    </template>

    <p>Main content goes here.</p>

    <template #footer> <!-- # is shorthand for v-slot -->
      <small>Copyright 2025</small>
    </template>
  </Layout>
</template>

Now content is slotted into the correct areas based on name.

3. Scoped Slots (Passing Data to Parent)

Scoped slots allow the child component to pass data back to the parent so the parent can control how that data is rendered.

This is useful for components like lists or dropdowns where the child handles logic, but the parent controls presentation.

Child Component (UserList.vue):

 <template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <slot :user="user" :showEmail="true"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: &#39;Alice&#39;, email: &#39;alice@example.com&#39; },
        { id: 2, name: &#39;Bob&#39;, email: &#39;bob@example.com&#39; }
      ]
    }
  }
}
</script>

Parent Component:

 <template>
  <UserList v-slot="{ user, showEmail }">
    <span>{{ user.name }}</span>
    <span v-if="showEmail"> - {{ user.email }}</span>
  </UserList>
</template>

Here, the child passes user and showEmail to the parent via the slot. The parent uses destructuring syntax in v-slot to access them.

? Note: Scoped slots are often used in advanced component patterns like renderless components or flexible list renderers.

Key Points to Remember

• Default slot : One unnamed <slot></slot> for general content.
• Named slots : Use name="x" and v-slot:x to target specific areas.
• Scoped slots : Pass data from child to parent via slot props.
• v-slot shorthand : #header instead of v-slot:header .
• Fallback content : Add content inside <slot></slot> as default.
• Multiple named slots : Can be used together with the default.

Slots make Vue components more flexible and truly reusable — instead of hardcoding content, you design components as templates with customizable parts.

Basically, slots = content distribution in Vue. And once you get used to them, you'll use them everywhere.

以上是VUE中有什麼插槽？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！