Vue 中 slot (插槽)是什么？ 多次聲明同個插槽會怎樣？
作者：大遷世界
在 Vue 中，插槽（slot）是一種內容分發機制，它允許你在組件內部預留一個“空白區域”，以便父組件在使用該子組件時傳入任意的內容。這種機制使得組件更靈活、更具可復用性，能夠滿足不同場景下的自定義需求。
在 Vue 中，插槽（slot）是一種內容分發機制，它允許你在組件內部預留一個“空白區域”，以便父組件在使用該子組件時傳入任意的內容。這種機制使得組件更靈活、更具可復用性，能夠滿足不同場景下的自定義需求。
主要作用
- 內容分發
插槽允許父組件將模板或內容傳遞到子組件中，這樣子組件就可以展示父組件提供的內容，而不必事先固定好顯示什么。 - 提高組件復用性
通過插槽，組件可以作為容器組件使用，而具體的內容由使用該組件的父組件決定，使得組件更加靈活和通用。 - 支持具名插槽和作用域插槽
- 默認插槽：沒有 name 屬性的插槽，父組件傳入的內容會填充到默認插槽中。
- 具名插槽：通過
name屬性標識的插槽，允許在一個組件中定義多個插槽，父組件可以根據名字將內容插入到相應的位置。 - 作用域插槽：允許子組件將數據“暴露”給父組件，父組件可以使用這些數據來動態渲染內容，這對于創建靈活的組件非常有用。
使用示例
1. 默認插槽
子組件（MyComponent.vue）：
<template>
<div class="container">
<slot></slot>
</div>
</template>父組件：
<template>
<MyComponent>
<p>這段內容會顯示在 MyComponent 的插槽中</p>
</MyComponent>
</template>2. 具名插槽
子組件：
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>父組件：
<template>
<MyComponent>
<template v-slot:header>
<h1>這是標題</h1>
</template>
<p>這是主體內容</p>
<template v-slot:footer>
<small>這是頁腳</small>
</template>
</MyComponent>
</template>3. 作用域插槽
子組件：
<template>
<div>
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: "Alice", age: 30 }
};
}
}
</script>父組件：
<template>
<MyComponent v-slot:default="slotProps">
<p>用戶名稱：{{ slotProps.user.name }}</p>
<p>用戶年齡：{{ slotProps.user.age }}</p>
</MyComponent>
</template>總結
- 插槽（slot） 是 Vue 中實現內容分發的機制，讓子組件預留出內容占位符，父組件則負責填充內容。
- 它提高了組件的靈活性和復用性，使組件可以根據不同的場景展示不同的內容。
- Vue 支持默認插槽、具名插槽和作用域插槽，這為復雜場景下的組件組合提供了極大的靈活性。
這種機制在實際開發中非常有用，例如構建 UI 框架組件、布局容器組件等，都可以利用插槽來實現高度可定制的效果。
如果一個組件內有多個默認插槽，它會怎么樣
在 Vue 中，插槽默認的名稱是 default，如果你在一個組件內放置了多個沒有指定 name 的 <slot> 標簽，Vue 會將它們都視作同一個默認插槽的多個插入點。
這意味著：
- 父組件傳入的默認插槽內容會被復制到每個默認插槽的位置中，即同一份內容會渲染多次。
- Vue 不會報錯，但這通常不是你想要的行為，因為內容重復可能導致意外的 UI 顯示。
示例：
<!-- MyComponent.vue -->
<template>
<div>
<slot></slot> <!-- 第一個默認插槽 -->
<slot></slot> <!-- 第二個默認插槽 -->
</div>
</template>如果父組件這樣使用：
<MyComponent>
<p>Hello, Vue!</p>
</MyComponent>最終頁面將渲染兩次 <p>Hello, Vue!</p>，即內容會在每個默認插槽中顯示。
建議：
如果需要在組件中定義多個內容分發點，推薦使用具名插槽來區分不同區域，這樣可以更明確地控制每個插槽中顯示的內容。
責任編輯：武曉燕
來源：
大遷世界
