详解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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
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
php连接mssql数据库的几种方法
2013/02/21 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Vue router安装及使用方法解析
2020/12/02 Vue.js
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Python内置加密模块用法解析
2019/11/25 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Python识别验证码的实现示例
2020/09/30 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
幼儿园中班教学反思
2014/02/10 职场文书
小松树教学反思
2014/02/11 职场文书
自荐信的基本格式
2014/02/22 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
上课迟到检讨书
2015/05/06 职场文书
详解Python函数print用法
2021/06/18 Python
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang