Vue中slot的介绍与使用（通俗版）

什么是插槽？插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制slot官方介绍Props：name - string，用于命名插槽。Usage：元素作为组件模板之中的内容分发插槽。元素自身将被替换...

_Boboy

97033人浏览 · 2019-04-28 16:52:02

_Boboy · 2019-04-28 16:52:02 发布

什么是插槽？

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

slot官方介绍

Props：

name - string，用于命名插槽。

Usage：

元素作为组件模板之中的内容分发插槽。元素自身将被替换。

官方demo

< slot > 元素

Shadow DOM 使用元素将不同的 DOM 树组合在一起。Slot 是组件内部的占位符，用户可以使用自己的标记来填充。

通过定义一个或多个 slot，您可将外部标记引入到组件的 shadow DOM 中进行渲染。这相当于您在说“在此处渲染用户的标记”。

注：Slot 是为网络组件创建“声明性 API”的一种方法。它们混入到用户的 DOM 中，帮助对整个组件进行渲染，从而将不同的 DOM
树组合在一起。

个人理解
slot是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中< slot >位置），当插槽也就是坑< slot name=”mySlot”>有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容；

Slot出现时为了解决什么问题呢？

正常情况下,< Child>< span style=”color:red;”>hello world</ span></ Child>在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时需要使用slot插槽；

好多人不知道这个说的是什么？简单讲就是没有一个标志性的标签 < Child>< span style=”color:red;”>hello world</ span></ Child>是不起作用的。只会显示Child的template的内容，不管template里面还有没有内容，也就是页面上被Child组件模板template内容替换掉了。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slot</title>
	<style type="text/css">
		.panel{
			width: 400px;
			border: 1px solid #ccc;	
		}
		.panel>*{
			padding: 15px;
			border-bottom: 1px solid #ccc;
		}
		.footer{
			border: none;
		}
	</style>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<Child>
            <span>hello world</span>
        </Child>
	</div>

	<template id="child">
		<div>
			
			<!-- <div class="panel">
				<div class="title">这是标题</div>
				<div class="content">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
				<div class="footer">这是页脚</div>
			</div> -->
						<div class="panel">
				<div class="title">这是标题</div>
				<div class="content">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
				<div class="footer">这是页脚</div>
			</div>
		</div>
	</template>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{

		},
		components:{
			Child:{
				template:"#child"
			}
		}
	})
</script>
</html>

具体怎么使用slot呢？（重点）

事先准备了一个demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slot</title>
	<style type="text/css">
		.panel{
			width: 400px;
			border: 1px solid #ccc;	
		}
		.panel>*{
			padding: 15px;
			border-bottom: 1px solid #ccc;
		}
		.footer{
			border: none;
		}
	</style>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<Child></Child>
	</div>

	<template id="child">
		<div>
			<div class="panel">
				<div class="title">这是标题</div>
				<div class="content">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
				<div class="footer">这是页脚</div>
			</div>
		</div>
	</template>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{

		},
		components:{
			Child:{
				template:"#child"
			}
		}
	})
</script>
</html>

在这里插入图片描述

单个或多个匿名插槽

	<div id="app">
		<Child>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</Child>
	</div>

	<template id="child">
		<div>
			<div class="panel">
				<div class="title">这是标题</div>
				<div class="content">
					<slot></slot>	
				</div>
				<div class="footer">这是页脚</div>
			</div>
		</div>
	</template>
	结果和初始demo一样，也可以把内容放到slot标签里，不过也就没啥意义了

	<div id="app">
		<Child>
			这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容<slot  style="color:red;" >这是在slot上添加了样式</slot>
		</Child>
	</div>

	<template id="child">
		<div>
			<div class="panel">
				<div class="title">这是标题</div>
				<div class="content">
					<slot></slot>
					<slot  style="color:blue;" >这是在slot上添加了样式</slot>
					<slot name="boboy">我是boboy</slot>					
				</div>
				<div class="footer">这是页脚</div>
			</div>
		</div>
	</template>
	结果会输出两遍--这是内容....+这是slot上添加了样式+我是boboy

注意：只有匿名插槽，若child标签有内容，看模板组件中有几个slot就渲染几次内容，且slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；

单个或多个具名插槽

	<div id="app">
		<Child>
			<div slot="title">这是页脚</div>
			<div slot="content">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
			<div slot="footer">这是页脚</div>
			
		</Child>
	</div>

	<template id="child">
		<div>
			<div class="panel">
				<div class="title"><slot name="title"></slot></div>
				<div class="content">
					<slot name="content"></slot>			
				</div>
				<div class="footer"><slot name="footer"></slot></div>
			</div>
		</div>
	</template>

作用域插槽
使用时候子组件标签中要有标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；

作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式，在这就不多展示了，网上很多可供参考。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slot</title>
	<style type="text/css">
		.panel{
			width: 400px;
			border: 1px solid #ccc;	
		}
		.panel>*{
			padding: 15px;
			border-bottom: 1px solid #ccc;
		}
		.footer{
			border: none;
		}
	</style>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<Child>
			<template slot="content" slot-scope="msg"><div>{{msg.data}}</div></template>
		</Child>
	</div>

	<template id="child" >
		<div>
			<div class="panel">
				<div class="title">这是标题</div>
				<div class="content">
					<slot name="content" :data="msg"></slot>			
				</div>
				<div class="footer">这是页脚</div>
			</div>
		</div>
	</template>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
		},
		components:{
			Child:{
				template:"#child",
				data(){
					return{
						msg:"这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容"
					}
					
				}
			}
		}
	})
</script>
</html>

帮助理解：
https://www.jb51.net/article/150676.htm
https://www.jb51.net/article/91976.htm
https://www.jb51.net/article/139214.htm
https://www.jb51.net/article/158639.htm

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^