Vue插槽理解
创始人
2025-05-29 04:07:22
0次

Vue插槽理解

  • 插槽

插槽

slot又名插槽，vue内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口
插槽slot是子组件的一个模板标签元素，而这一个元素是否显示，以及怎么显示是由父组件决定的
slot分为三类：默认插槽、具名插槽、作用域插槽

  • 默认插槽

父组件代码详情

子组件代码详情

运行结果：
运行结果

又叫匿名插槽，当插槽slot没有指定name属性值的时候一个默认显示一个插槽，一个组件内只有一个匿名插槽

  • 具名插槽

带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽
父组件代码详情

子组件代码详情

运行结果：
具名插槽

  • 作用域插槽

在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件传递过来的数据如何渲染该插槽
父组件代码详情

子组件代码详情

**原理：**当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.slot中，默认插槽为vm.slot中，默认插槽为vm.slot中，默认插槽为vm.slot.default,具名插槽为vm.slot.xxx,xxx是插槽的名字，当组件执行渲染函数时候，遇到slot标签，使用slot.xxx,xxx是插槽的名字，当组件执行渲染函数时候，遇到slot标签，使用slot.xxx,xxx是插槽的名字，当组件执行渲染函数时候，遇到slot标签，使用slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则就是作用域插槽

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：使用asan检测内存泄漏、堆栈溢出等问题

下一篇：还在用传统工具进行做计划?试试这五款优秀计划管理工具！

相关内容

热门资讯

刚刚，德勤中国官宣新CEO 德... 5月30日，德勤中国宣布，刘明华将接替曾顺福出任德勤中国首席执行官，自2025年6月1日起生效，任期...
React 执行架构流程详细-... React 执行架构流程详细----归阶段 mount 时流程（三） 目...
险资活水入市来 超1700亿元... 既有新的保险系私募证券基金管理人完成备案，也有新的保险系私募基金产品发起设立，还有险企宣布将设立私募...
石药集团：就三项潜在交易进行磋... 新京报贝壳财经讯 5月30日，石药集团在港交所公告，集团目前正与若干独立第三方就三项潜在交易进行磋商...
Spring学习（三） Spring的AOP的XML开发（重要指数五颗星*****） 一、AOP...
缓存穿透，缓存雪崩，缓存击穿 注：该文章基于黑马程序员中《黑马点评》软件的学习 视频链接 涉及视频 p40p42p4...
去年净利增五成，厦门国际银行遭... 来源：密探财经（ID：Spy Finance）刚刚，号称“中国第一家中外合资银行”的厦门国际银行被“...
石药集团：就三项潜在交易进行磋... 新京报贝壳财经讯 5月30日，石药集团在港交所公告，集团目前正与若干独立第三方就三项潜在交易进行磋商...
「开盘」A股三大股指集体低开，... A股三大股指5月30日集体低开。其中，沪指跌0.14%报3358.81点，深成指跌0.36%报100...
淘宝天猫消费者频频上当维权艰难... 文丨顾小白 编辑丨百进来源丨正经社（ID：zhengjingshe）（本文约为3100字）【正经社“...
哪吒汽车“债转股”失败，知情人... 据媒体5月29日报道，哪吒汽车上海总部外墙的“哪吒汽车”LOGO目前被拆除，一并被拆除的还有位于总部...
Struts2—Ognl 表达... 0x00 前言 补充一下Ognl表达式的相关的知识点。尽量调有用的知识点来进行记录。 Ognl&#x...
恒生指数开盘跌0.99%，恒生... 5月30日，恒生指数开盘跌0.99%，网易跌近4%领跌蓝筹，恒生科技指数跌1.26%。手回集团上市首...
昨日获资金净流入，科创板人工智... 5月30日，三大指数集体低开，科技方向震荡走低。截至发稿，上证科创板人工智能指数下跌1.69%。相关...
25. 在QWidget窗口中... 1. 说明： QML开发界面是最近才开始流行，在之前的老项目中一般都是使...
Redis高级篇 文章目录面试题库redis有哪些用法？redis单线程时代性能依然很快的原因ÿ...
STM32+Keil+新建工程... 导言： 近来开始学习嵌入式相关，谁曾想一个新建工程就给我整懵了。 以前大...
移动支付概念盘初活跃 移动支付... 【移动支付概念盘初活跃】路桥信息涨超16%，雄帝科技涨12%，云内动力、海联金汇、翠微股份涨停，湘邮...
1.计算机网络和因特网 1.因特网的描述1.1 具体构成描述根据底层实现（硬件软件）端系统(主机...
华大基因股价已超券商目标价，亿... 5月29日，券商给予上市公司目标价共4次，按最新收盘价计算，目标价涨幅排名居前的公司有科博达、亿帆医...