详解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 validate在ie8下的bug解决方法
Nov 13 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 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 error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python 图片去噪的方法示例
2019/07/09 Python
Python的Lambda函数用法详解
2019/09/03 Python
python环境下安装opencv库的方法
2020/03/05 Python
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
酒店总经理职务说明书
2014/02/26 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
经费申请报告范文
2015/05/18 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS