Vue中插槽slot的用法詳解
Vue插槽
插槽（Slot）是Vue.js中一個非常重要的概念，它極大地提高了組件的復用性和靈活性。通過插槽，我們可以自定義組件的內(nèi)容，使其能夠適應不同的場景。本文將結(jié)合實際案例，詳細介紹Vue中插槽的基本用法、類型以及高級技巧。
一、插槽的基本概念
在Vue中，子組件的模板可以定義多個插槽（包括默認插槽和具名插槽等），而父組件在引用子組件時，可以根據(jù)需要有選擇性地為這些插槽插入內(nèi)容。如果父組件沒有為某個插槽提供內(nèi)容，那么子組件的模板中該插槽的位置將顯示為該插槽的默認內(nèi)容（如果有的話），或者簡單地留空。
二、默認插槽
默認插槽是插槽家族中最簡單的使用方式，它沒有指定名稱，用于接收父組件傳遞的未明確指定插槽名稱的內(nèi)容。
1. 基本語法
在子組件中使用<slot></slot>定義默認插槽的位置，父組件中直接放在子組件標簽內(nèi)的內(nèi)容會被渲染到該位置。
2. 代碼示例
子組件（DefaultSlotChild.vue）：
<template>
<div class="child">
<h2>我是子組件的標題</h2>
<!-- 默認插槽 -->
<slot></slot>
</div>
</template>
父組件：
<template>
<div>
<DefaultSlotChild>
<!-- 這里的內(nèi)容會被渲染到子組件的默認插槽中 -->
<p>這是來自父組件的默認插槽內(nèi)容1</p>
<p>這是來自父組件的默認插槽內(nèi)容2</p>
</DefaultSlotChild>
</div>
</template>
<script>
import DefaultSlotChild from './DefaultSlotChild.vue';
export default {
components: {
DefaultSlotChild
}
}
</script>
在這個例子中，父組件傳遞了兩個段落標簽到子組件的默認插槽中，這兩個段落標簽會被渲染到子組件模板的<slot></slot>位置。
3. 后備內(nèi)容（默認值）
如果父組件沒有為默認插槽提供內(nèi)容，子組件的模板中該插槽的位置可以顯示后備內(nèi)容（默認內(nèi)容）。
<template>
<div class="child">
<h2>我是子組件的標題</h2>
<!-- 默認插槽，帶有后備內(nèi)容 -->
<slot>這是默認插槽的后備內(nèi)容</slot>
</div>
</template>
當父組件沒有為默認插槽提供內(nèi)容時，后備內(nèi)容“這是默認插槽的后備內(nèi)容”會被渲染出來。
三、具名插槽
具名插槽用于接收父組件中明確指定插槽名稱的內(nèi)容。它允許一個組件內(nèi)有多個插槽，每個插槽可以有不同的內(nèi)容。
1. 基本語法
在子組件中使用<slot name="插槽名稱"></slot>定義具名插槽，父組件中通過<template v-slot:插槽名稱>或簡寫為<template #插槽名稱>來指定內(nèi)容應該插入哪個具名插槽。
2. 代碼示例
子組件（NamedSlotChild.vue）：
<template>
<div class="child">
<header>
<!-- 具名插槽: header -->
<slot name="header"></slot>
</header>
<main>
<!-- 默認插槽 -->
<slot></slot>
</main>
<footer>
<!-- 具名插槽: footer -->
<slot name="footer"></slot>
</footer>
</div>
</template>
父組件：
<template>
<NamedSlotChild>
<template v-slot:header>
<!-- 這里的內(nèi)容會被渲染到子組件的header插槽中 -->
<h1>這是標題</h1>
</template>
<p>這是默認插槽的內(nèi)容。</p>
<template v-slot:footer>
<!-- 這里的內(nèi)容會被渲染到子組件的footer插槽中 -->
<p>這是頁腳</p>
</template>
</NamedSlotChild>
</template>
<script>
import NamedSlotChild from './NamedSlotChild.vue';
export default {
components: {
NamedSlotChild
}
}
</script>
在這個例子中，父組件為子組件的header插槽和footer插槽分別提供了內(nèi)容，而默認插槽則接收了一個段落標簽。
3. v-slot的簡寫
v-slot的寫法較長，Vue提供了一個簡寫方式，即將v-slot:簡寫為#。
<template #header> <!-- 這里的內(nèi)容會被渲染到子組件的header插槽中 --> <h1>這是標題</h1> </template>
四、作用域插槽
作用域插槽是一種特殊的插槽，它允許子組件將數(shù)據(jù)暴露給父組件的插槽內(nèi)容。這樣，父組件可以使用子組件傳遞的數(shù)據(jù)來定制插槽的內(nèi)容。
1. 基本語法
在子組件中，通過<slot :數(shù)據(jù)名="數(shù)據(jù)值"></slot>將數(shù)據(jù)傳遞給插槽。在父組件中，通過<template v-slot:插槽名稱="slotProps">接收數(shù)據(jù)，并使用slotProps來訪問傳遞過來的數(shù)據(jù)。
2. 代碼示例
子組件（ScopedSlotChild.vue）：
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot name="item" :item="item">{{ item.text }}</slot>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: '蘋果' },
{ id: 2, text: '香蕉' },
{ id: 3, text: '橙子' }
]
}
}
}
</script>
父組件：
<template>
<ScopedSlotChild>
<template v-slot:item="slotProps">
<!-- 使用slotProps訪問子組件傳遞的數(shù)據(jù) -->
<strong>{{ slotProps.item.text }}</strong>
</template>
</ScopedSlotChild>
</template>
<script>
import ScopedSlotChild from './ScopedSlotChild.vue';
export default {
components: {
ScopedSlotChild
}
}
</script>
在這個例子中，子組件將items數(shù)組中的每個元素通過作用域插槽傳遞給父組件，父組件使用slotProps訪問傳遞過來的數(shù)據(jù)，并將其渲染為粗體文本。
3. 動態(tài)插槽名
插槽的名稱也可以是動態(tài)的，根據(jù)組件的狀態(tài)或其他條件來決定使用哪個插槽。在父組件中，通過:slot="動態(tài)名稱"來綁定插槽的名稱，其中動態(tài)名稱可以是一個計算屬性、方法返回值或數(shù)據(jù)屬性。
五、綜合案例：封裝表格組件
在實際項目中，封裝表格組件是一個常見的需求。通過插槽，我們可以自定義表格的每一列，使其能夠適應不同的數(shù)據(jù)類型和展示方式。
代碼準備
根組件（APP.vue）：
<template>
<div>
<MyTable :data="list1">
<!-- 使用插槽 -->
<template #default="obj">
<button @click="del(obj.row.id)">刪除</button>
</template>
</MyTable>
<MyTable :data="list2">
<template v-slot:default="{ row }">
<button @click="show(row)">查看</button>
</template>
</MyTable>
</div>
</template>
<script>
import MyTable from './components/MyTable.vue';
export default {
data() {
return {
list1: [
{ id: 1, name: '趙天明', age: 25 },
{ id: 2, name: '李翔飛', age: 22 },
{ id: 3, name: '吳國基', age: 24 }
],
list2: [
{ id: 4, name: '王小明', age: 26 },
{ id: 5, name: '張小麗', age: 23 },
{ id: 6, name: '李大力', age: 27 }
]
};
},
methods: {
del(id) {
this.list1 = this.list1.filter(item => item.id !== id);
},
show(row) {
alert(`姓名:${row.name}; 年齡:${row.age}`);
}
},
components: {
MyTable
}
}
</script>
子組件（MyTable.vue）
<template>
<div class="my-table">
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="row in data" :key="row.id">
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>
<!-- 使用插槽來渲染操作列 -->
<slot :row="row"></slot>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'MyTable',
props: {
data: {
type: Array,
required: true
}
}
}
</script>
<style scoped>
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table th, .my-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.my-table th {
background-color: #f2f2f2;
}
</style>
綜合案例解析
在這個綜合案例中，我們封裝了一個簡單的表格組件MyTable，它接收一個data屬性，該屬性是一個對象數(shù)組，每個對象代表表格中的一行數(shù)據(jù)。MyTable組件內(nèi)部使用v-for指令遍歷data數(shù)組，并為每一行數(shù)據(jù)生成一個表格行（<tr>）。
在表格的最后一列（操作列），我們使用了插槽（<slot :row="row"></slot>），這樣父組件就可以自定義這一列的內(nèi)容。通過v-slot:default="{ row }"語法，父組件可以接收到子組件傳遞的每一行數(shù)據(jù)，并據(jù)此渲染相應的操作按鈕或鏈接。
父組件中的使用
在父組件中，我們創(chuàng)建了兩個數(shù)據(jù)列表list1和list2，并分別將它們傳遞給兩個MyTable組件實例。對于第一個MyTable組件實例，我們使用了一個帶命名的插槽（雖然這里使用的是默認插槽，但命名插槽的語法類似），并通過@click事件監(jiān)聽器綁定了刪除操作。對于第二個MyTable組件實例，我們使用了簡寫的插槽語法，并通過show方法實現(xiàn)了查看操作。
插槽的作用
在這個案例中，插槽的作用主要體現(xiàn)在以下幾個方面：
提高組件的復用性：通過插槽，我們可以將表格的操作列留給父組件自定義，這樣
MyTable組件就可以適用于不同的場景，而無需修改組件本身的代碼。實現(xiàn)數(shù)據(jù)的靈活展示：父組件可以根據(jù)需要傳遞不同的數(shù)據(jù)給子組件，并通過插槽展示這些數(shù)據(jù)。在這個案例中，父組件通過插槽傳遞了刪除和查看兩個操作按鈕，而這兩個操作的具體實現(xiàn)則是由父組件控制的。
保持組件的簡潔性：將復雜的展示邏輯放在父組件中處理，可以使子組件保持簡潔和專注。在這個案例中，
MyTable組件只負責渲染表格的基本結(jié)構(gòu)，而具體的操作邏輯則留給父組件實現(xiàn)。
六、總結(jié)
插槽是Vue中一個非常強大的功能，它允許我們在子組件中定義插槽位置，并在父組件中填充這些內(nèi)容。通過插槽，我們可以實現(xiàn)組件的高度自定義和復用性。在本文中，我們詳細介紹了默認插槽、具名插槽和作用域插槽的基本用法，并通過一個綜合案例展示了如何在實際項目中應用這些插槽類型來封裝表格組件。希望這些內(nèi)容能幫助你更好地理解和使用Vue中的插槽功能。
以上就是Vue中插槽slot的用法詳解的詳細內(nèi)容，更多關(guān)于Vue插槽slot用法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue使用高德地圖點擊下鉆 上浮效果的實現(xiàn)思路,本文以浙江省為例通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2019-10-10
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
在Vue.js中，路由與導航不僅涉及頁面切換，還包括了向頁面?zhèn)鬟f參數(shù)和獲取查詢參數(shù)，這篇文章主要介紹了Vue路由參數(shù)與查詢參數(shù)傳遞,需要的朋友可以參考下2023-08-08
vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)
這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號顯示的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-11-11
本篇文章給大家分享了Vue取消eslint語法限制的相關(guān)知識點內(nèi)容，有興趣的朋友們可以參考學習下。2018-08-08
Vue簡單封裝axios網(wǎng)絡(luò)請求的方法
這篇文章主要介紹了Vue簡單封裝axios網(wǎng)絡(luò)請求,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，對Vue封裝axios網(wǎng)絡(luò)請求相關(guān)知識感興趣的朋友一起看看吧2022-11-11
Vue3 獲取地址欄參數(shù)有兩個方式：查詢參數(shù)和路徑參數(shù)。Vue3獲取地址欄參數(shù)是從路由router中獲取，查詢參數(shù)和路徑參數(shù)獲取方式不一樣。感興趣的同學可以參考閱讀2023-04-04
基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能
這篇文章主要介紹了基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能,需要的朋友可以參考下2017-05-05