Vue组件之作用域插槽
2024-09-30 07:00:27
写作用域插槽之前,先介绍一下Vue中的slot内容分发:
如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的“<p>父组件如果没有插入内容,我将被显示</p>”这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot>标签以及之间的内容都会被替换成<child-component></child-component>标签之间插入的内容。
这里子组件<slot>内的备用内容,作用域是子组件本身;
作用域插槽:
显示结果:
template内可以通过临时变量props来访问来自子组件插槽的数据msg
作用域插槽更具代表性的用例是列表组件:
子组件<my-list></my-list>接受一个父组件传过来的books数组。并且将它在name为book的slot上使用v-for循环,同时暴露变量bookName,父组件的my-list标签内就可以通过props.bookName访问到绑定的数据;
作用域插槽的使用场景:既可以复用子组件的slot,又可以使slot内容不一致;
最新文章
- POJ 1659 Frogs&#39; Neighborhood(Havel-Hakimi定理)
- fiddler filter 过滤css 图片等
- svn 分支与合并的使用
- [LOJ 1248] Dice (III)
- 使用Twisted进行socket编程
- jsp中<;c:if>;与<;s:if>;的区别
- HBase HTablePool
- java生成字符串md5函数类(javaSE)
- 用C#实现生成PDF文档
- 在cnblog中使用syntax方法
- java中的特殊字符集合
- ASP.NET MVC 用户登录Login
- Jquery-获取勾选的checkbox的同级节点数量
- ROS机器人程序设计(原书第2版)补充资料 (捌) 第八章 导航功能包集入门 navigation
- Tkinter小技巧:如何为窗口右上角的‘x’添加一个自定义的响应函数
- 二十三、Interpreter 解释器模式
- SpringMVC 全局异常处理
- CodeForces Round #548 Div2
- 转载--无弹窗APT渗透实验
- 转载-iOS SDK开发
热门文章
- 探索JS引擎工作原理 (转)
- Unsupported platform for fsevents@1.2.3: wanted {";os";:";darwin";,";arch";:";any";} (current: {";os";:";win32";,";arch";:";x64";})
- Project Euler 35 Circular primes
- 2019-03-28 SQL Server select 1
- Untiy中的数据平滑处理
- 使用LeNet训练自己的手写图片数据
- Unknown tag (s:property).
- SQL--各种约束
- 关于sql连接查询(内联、左联、右联、全联)
- SSAO + FXAA