详解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 UI AutoComplete 自动完成使用小记
Aug 21 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
js控制随机数生成概率代码实例
Mar 21 Javascript
Vue监视数据的原理详解
Feb 24 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
基于mysql的论坛(7)
2006/10/09 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
JS跨域总结
2012/08/30 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
vue的全局提示框组件实例代码
2018/02/26 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
JS中作用域以及变量范围分析
2020/07/18 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python判断telnet通不通的实例
2019/01/26 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
奠基仪式主持词
2014/03/20 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
Python入门之使用pandas分析excel数据
2021/05/12 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
深入理解pytorch库的dockerfile
2022/06/10 Python