详解Vue中使用插槽(slot)、聚类插槽


Posted in Javascript onApril 12, 2019

一、基本的插槽

这里总结两点

  1. 如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示
  2. (插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容

slot 代表父组件往子组件中 插入的标签
这里就代表组件子组件中的 

<p>Dell</p>
<child>
<p>Dell</p>
</child>

这里如果是这样的

<child>	</child>

就会显示 <slot>默认内容</slot>中的默认内容 

二、聚类插槽

1、如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示

2、(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容

这里如果是这样的

<child> </child>

就会显示<slot>默认内容</slot>中的 默认内容

3、聚类插槽

子组件这么写:

template:`<div>
<slot>默认内容</slot>
<p>content</p>
<slot>默认内容</slot>
</div>

然后这么引用:

<child>	
<div>header</div>				
<div>footer</div>
</child>

就会发现结果是

header
footer
content
header
 footer

这个不是我的本意,那么怎么办,这里就引入了聚类插槽
子组件:

template:`<div>
<slot name='header'>默认内容</slot>
<p>content</p>
<slot name='footer'>默认内容</slot>
</div>`

子组件引用:

<child>
<div slot='header'>header</div>
<div slot='footer'>footer</div>
</child>

不难发现给每个想要指定的子组件插槽添加 name属性,然后在引用中 slot中明确 是哪个即可也可以理解为引用中是用了两个插槽同时,默认内容同时适用在每个插槽

三、作用域插槽

这个是普通插槽的Demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue中使用插槽(slot)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- 
			1、如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示
			2、(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 
			这里如果是这样的
				<child>
				</child>	
			就会显示 <slot>默认内容</slot>中的	
				默认内容	
		-->
		<child>
			<p>Dell</p>
		</child>
	</div>

	<script type="text/javascript">
		Vue.component('child',{
			/*
				slot 代表 父组件往子组件中 插入的标签
				这里就代表 组件子组件中的	<p>Dell</p>
					<child>
						<p>Dell</p>
					</child>
			*/
			template:`<div>
						<slot>默认内容</slot>
					 </div>`
		});

		var vm = new Vue({
			el:'#root',

		});
	</script>
</body>
</html>

这个是聚类插槽的Demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue中使用插槽(slot)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- 
			1、如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示
			2、(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 
			这里如果是这样的
				<child>
				</child>	
			就会显示 <slot>默认内容</slot>中的	
				默认内容	
			3、聚类插槽
			子组件这么写:
				template:`<div>
					<slot>默认内容</slot>
					<p>content</p>
					<slot>默认内容</slot>
				 </div>`	
			然后这么引用:
					<child>
						<div>header</div>
						<div>footer</div>
					</child>
			就会发现结果是
				header
				footer
				content

				header
				footer
			这个不是我的本意,那么怎么办,这里就引入了聚类插槽
			子组件:
				template:`<div>
						<slot name='header'>默认内容</slot>
						<p>content</p>
						<slot name='footer'>默认内容</slot>
					 </div>`
			子组件引用:
				<child>
					<div slot='header'>header</div>
					<div slot='footer'>footer</div>
				</child>
			不难发现给每个想要指定的子组件插槽添加 name属性,
			然后在引用中 slot中明确 是哪个即可
			也可以理解为引用中是用了两个插槽
			同时,默认内容同时适用在每个插槽

		-->
		<child>
			<div slot='header'>default header</div>
			<div slot='footer'>default footer</div>
		</child>
	</div>

	<script type="text/javascript">
		Vue.component('child',{
			/*
				slot 代表 父组件往子组件中 插入的标签
				这里就代表 组件子组件中的	<p>Dell</p>
					<child>
						<p>Dell</p>
					</child>
			*/
			template:`<div>
						<slot name='header'>默认内容</slot>
						<p>content</p>
						<slot name='footer'>默认内容</slot>
					 </div>`
		});

		var vm = new Vue({
			el:'#root',

		});
	</script>
</body>
</html>

以上所述是小编给大家介绍的Vue中使用插槽(slot)、聚类插槽详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
ztree实现权限横向显示功能
May 20 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
详解vue项目打包步骤
Mar 29 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
JS实现li标签的删除
Apr 12 #Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 #Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 #Javascript
如何检查一个对象是否为空
Apr 11 #Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 #Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 #Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
html读出文本文件内容
2007/01/22 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
详解Django 中是否使用时区的区别
2018/06/14 Python
python多进程实现文件下载传输功能
2018/07/28 Python
浅谈Python中的bs4基础
2018/10/21 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python pycharm的安装及其使用
2019/10/11 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
超市中秋节促销方案
2014/03/21 职场文书
捐书活动总结
2014/05/04 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
护理专业自我评价
2015/03/11 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Spring Bean是如何初始化的详解
2022/03/22 Java/Android