Vue3實戰(zhàn)之插槽封裝與懶加載詳解
更新時間：2025年04月27日 10:38:45 作者：jingling1007
這篇文章主要介紹了Vue3實戰(zhàn)之插槽封裝與懶加載的相關(guān)資料,過插槽實現(xiàn)組件的結(jié)構(gòu)分離、復(fù)用性和語義清晰,通過懶加載實現(xiàn)圖片的按需加載,減少首屏加載時間和資源浪費,文中給出了詳細的代碼示例,需要的朋友可以參考下
一、為什么需要插槽？從一個面板組件說起
在電商首頁開發(fā)中，經(jīng)常遇到這樣的場景：
「新鮮好物」「人氣推薦」同樣類型模塊都需要相同的標題欄，但內(nèi)容區(qū)布局不同這時候，插槽（Slot）就像一個「內(nèi)容拼圖位」，讓組件既能統(tǒng)一樣式，又能靈活定制。
實戰(zhàn)案例：HomePanel 通用面板
<template>
<div class="home-panel">
<div class="head">
<h3>{{ title }}<small>{{ subTitle }}</small></h3>
</div>
<slot name="main" /> <!-- 內(nèi)容拼圖位 -->
</div>
</template>
<script setup>
defineProps({ title: String, subTitle: String })
</script>
使用方式：
<HomePanel title="新鮮好物" sub-title="新鮮出爐">
<template #main> <!-- 填充拼圖 -->
<ul class="goods-list">
<li v-for="item in list">{{ item.name }}</li>
</ul>
</template>
</HomePanel>
實現(xiàn)效果：
插槽的 3 個好處：
- 結(jié)構(gòu)分離：標題樣式統(tǒng)一管理，內(nèi)容區(qū)自由發(fā)揮（列表 / 圖片 / 按鈕均可）
- 復(fù)用性強：一個面板組件適配 N 種業(yè)務(wù)場景
- 語義清晰：通過具名插槽（#main）明確內(nèi)容位置
二、懶加載：讓圖片「按需加載」的魔法
電商首頁往往包含大量圖片，一次性加載會導(dǎo)致：
- 首屏加載慢
- 流量浪費
- 手機發(fā)燙
懶加載（Lazy Load）的核心邏輯：圖片進入視口時再加載
用 Vue3 指令實現(xiàn)懶加載
// 全局指令：directives/lazy.js
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
install(app) {
app.directive('img-lazy', {
mounted(el, binding) {
// 當(dāng)元素進入視口時
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
if (isIntersecting) {
el.src = binding.value // 替換真實src
stop() // 停止觀察，避免重復(fù)觸發(fā)
}
})
}
})
}
}
使用方式：
<img v-img-lazy="goods.picture" alt="商品圖" />
實現(xiàn)原理拆解：
- IntersectionObserver：瀏覽器原生 API，監(jiān)聽元素是否進入視口
- 指令生命周期：在
mounted階段綁定觀察，避免重復(fù)綁定 - 停止觀察：圖片加載后立即停止監(jiān)聽，節(jié)省性能
三、插槽 × 懶加載：實戰(zhàn)中的黃金組合
在「商品館」模塊中，同時用到了插槽和懶加載：
<HomePanel title="數(shù)碼館">
<template #main>
<div class="box">
<img v-img-lazy="bannerUrl" class="cover" /> <!-- 大圖懶加載 -->
<ul>
<li v-for="goods in list">
<GoodsItem :goods="goods" /> <!-- 子組件插槽 -->
</li>
</ul>
</div>
</template>
</HomePanel>
<!-- GoodsItem子組件 -->
<template>
<RouterLink>
<img v-img-lazy="goods.picture" /> <!-- 商品圖懶加載 -->
<p>{{ goods.name }}</p>
</RouterLink>
</template>
效果：
- 標題欄統(tǒng)一樣式，內(nèi)容區(qū)自由布局（大圖 + 列表）
- 所有圖片均在進入視口時加載，首屏加載速度提升 40%
四、新手避坑指南
- 插槽默認值：給插槽設(shè)置默認內(nèi)容，避免父組件未傳時的空白
<slot name="main">暫無內(nèi)容</slot>
- 懶加載占位圖：加載前使用占位圖（如灰色色塊），避免布局抖動
<img v-img-lazy="realSrc" :src="placeholder" />
- 指令參數(shù)校驗：確保指令值是合法 URL
if (!binding.value.startsWith('http')) return
五、總結(jié)：讓組件會「呼吸」
- 插槽讓組件有了「可插拔」的能力，像搭積木一樣組裝頁面
- 懶加載讓頁面學(xué)會「按需呼吸」，節(jié)省資源的同時提升用戶體驗
- 兩者結(jié)合，實現(xiàn)了 「結(jié)構(gòu)統(tǒng)一」與「內(nèi)容靈活」的完美平衡
到此這篇關(guān)于Vue3實戰(zhàn)之插槽封裝與懶加載的文章就介紹到這了,更多相關(guān)Vue3插槽封裝與懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue解決ajax跨域的問題，跨域請求：是指協(xié)議名、主機名、端口號三者有任何一個不一樣，而且跨域請求是請求發(fā)出去了，服務(wù)器接收并返回了結(jié)果，只是瀏覽器沒有接收響應(yīng)結(jié)果。感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要為大家詳細介紹了elementUI實現(xiàn)級聯(lián)選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
在現(xiàn)代Web開發(fā)中,前端與后端的數(shù)據(jù)交互至關(guān)重要,Vue.js作為一款流行的前端框架,結(jié)合Axios庫能夠高效地實現(xiàn)HTTP請求與數(shù)據(jù)處理,本文將詳細講解如何在Vue 3中使用Axios,并通過實際案例展示其用法,需要的朋友可以參考下2024-12-12
vue新建環(huán)境變量以及網(wǎng)絡(luò)請求工具axios的二次封裝詳解
這篇文章主要為大家介紹了vue新建環(huán)境變量以及網(wǎng)絡(luò)請求工具axios的二次封裝詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇解決vue 綁定對象內(nèi)點擊事件失效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue項目強制清除頁面緩存的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue使用CDN引用項目組件，減少項目體積的步驟，幫助大家提高項目加載速度，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
下面小編就為大家分享一篇解決vue多個路由共用一個頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03