slot插槽来实现百搭的组件化开发

前言

在用vue开发实际项目中,我们都是模块化开发,例如一个弹出框,不可能用到的时候,在页面里找吧找吧上个,再粘贴(ps:如果还有这样做的友友们,赶紧改了吧0.0)......所以我们需要组件化开发,简单的组件我们都会开发,但是怎么才能封装一个耐用白搭的组件呢?那就少不了今天所介绍的主题------插槽;

什么是插槽?

emm....我个人不喜欢讲概念,所以我用我理解的大白话来跟大家说;我理解的:在组件开发中,插槽就是在组件的template模板中,我们有一段代码比较灵活(这段代码就是个变量),我们需要改变这个"变量",所以使用slot来搞这个"变量"。

使用demo

话不多说,下面简单给大家列举俩我在实际项目中开发的实例吧

demo1:

场景:

如图所示,就是鼠标在点点点上会弹出来个泡泡框,但泡泡框里的item,在每个地方都不太一样,所以 我就考虑插槽了~

组件中的代码:

这是我基于element-ui,二次封住的一个小组件,名字就叫more-opera-box,重点就是这个

ini 复制代码
<slot name="box_content"></slot>

这个就是我上面说的那个"变量"

在其他界面使用:

简单的引用组件,就不说了,这个样子使用,在more-opera-box中,多加template 代码段,该代码片段就是这个"变量"的具体值;tips:添加#刚刚自己slot中的name的名字哦~

demo2

场景:

如图,这次我们是一个弹出框,只有头头不太一样,其余地方都一样,就像上面所说的,这次的"变量"就是这个头头啦~

组件中的代码:

在其他界面使用:

效果:

Ending

了解完这俩demo,相信大家都对这个"变量"(插槽)有了简单的理解了吧~ 希望对友友们下来的开发有帮助哟~

相关推荐
@大迁世界16 分钟前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
知识分享小能手18 分钟前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead32 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu32 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡36 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞39 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu41 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu41 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu42 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge44 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端