Vue3实战之插槽封装与懒加载详解
作者：jingling1007
这篇文章主要介绍了Vue3实战之插槽封装与懒加载的相关资料,过插槽实现组件的结构分离、复用性和语义清晰,通过懒加载实现图片的按需加载,减少首屏加载时间和资源浪费,文中给出了详细的代码示例,需要的朋友可以参考下
一、为什么需要插槽？从一个面板组件说起
在电商首页开发中，经常遇到这样的场景：
「新鲜好物」「人气推荐」同样类型模块都需要相同的标题栏，但内容区布局不同这时候，插槽（Slot）就像一个「内容拼图位」，让组件既能统一样式，又能灵活定制。
实战案例：HomePanel 通用面板
<template>
<div class="home-panel">
<div class="head">
<h3>{{ title }}<small>{{ subTitle }}</small></h3>
</div>
<slot name="main" /> <!-- 内容拼图位 -->
</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>
实现效果：
插槽的 3 个好处：
- 结构分离：标题样式统一管理，内容区自由发挥（列表 / 图片 / 按钮均可）
- 复用性强：一个面板组件适配 N 种业务场景
- 语义清晰：通过具名插槽（#main）明确内容位置
二、懒加载：让图片「按需加载」的魔法
电商首页往往包含大量图片，一次性加载会导致：
- 首屏加载慢
- 流量浪费
- 手机发烫
懒加载（Lazy Load）的核心逻辑：图片进入视口时再加载
用 Vue3 指令实现懒加载
// 全局指令：directives/lazy.js
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
install(app) {
app.directive('img-lazy', {
mounted(el, binding) {
// 当元素进入视口时
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
if (isIntersecting) {
el.src = binding.value // 替换真实src
stop() // 停止观察，避免重复触发
}
})
}
})
}
}
使用方式：
<img v-img-lazy="goods.picture" alt="商品图" />
实现原理拆解：
- IntersectionObserver：浏览器原生 API，监听元素是否进入视口
- 指令生命周期：在
mounted阶段绑定观察，避免重复绑定 - 停止观察：图片加载后立即停止监听，节省性能
三、插槽 × 懒加载：实战中的黄金组合
在「商品馆」模块中，同时用到了插槽和懒加载：
<HomePanel title="数码馆">
<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>
效果：
- 标题栏统一样式，内容区自由布局（大图 + 列表）
- 所有图片均在进入视口时加载，首屏加载速度提升 40%
四、新手避坑指南
- 插槽默认值：给插槽设置默认内容，避免父组件未传时的空白
<slot name="main">暂无内容</slot>
- 懒加载占位图：加载前使用占位图（如灰色色块），避免布局抖动
<img v-img-lazy="realSrc" :src="placeholder" />
- 指令参数校验：确保指令值是合法 URL
if (!binding.value.startsWith('http')) return
五、总结：让组件会「呼吸」
- 插槽让组件有了「可插拔」的能力，像搭积木一样组装页面
- 懒加载让页面学会「按需呼吸」，节省资源的同时提升用户体验
- 两者结合，实现了 「结构统一」与「内容灵活」的完美平衡
到此这篇关于Vue3实战之插槽封装与懒加载的文章就介绍到这了,更多相关Vue3插槽封装与懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！