正文

Vue中的slot插槽详解

譬如朝露 V管理员/ / 0 评论/ 910阅读
03 20

插槽的作用：我们需要在组件标签中添加一些内容，或者html元素等，就需要使用到了插槽

1.默认插槽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{title}}</div>
			<child >
				<ul>
					<span>{{title}}</span>
				</ul>
			</child>
		</div>
		<script type="text/template" id="child">
			<div>
				<slot>我是子组件</slot>
			</div>
		</script>
		<script>
			var child={
				template:'#child',
				
			}
			new Vue({
				el:'#app',
				data:{
					title:"根组件",
					list:[
						{id:1,name:'张三'},
						{id:2,name:'李四'},
						{id:3,name:'王五'},
						{id:4,name:'赵六'},
					]
				},
				components:{
					child
				}
			})
		</script>
	</body>
</html>

例如以上代码，我们需要在child的组件中添加一些标签，必须在child的模板中写入slot标签，child标签才能显示里面的HTML代码

2.具名插槽

我们需要多个插槽的时候，就需要给插槽起个名字，然后使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{title}}</div>
			<child >
				这里设置对应显示的插槽，名称需要和下面指定的一直，如果不指定名称，会被视为默认插槽的内容
				<div slot="header">我是头部</div>
				<div slot="main">我是内容区域</div>
				<div slot="footer">我是底部</div>
				<div>12323</div>
			</child>
		</div>
		<script type="text/template" id="child">
			<div>
		//这里定义相对应的插槽名字
				<slot name="header"></slot>
				<slot name="main"></slot>
				<slot name="footer"></slot>
				<slot ></slot>
			</div>
		</script>
		<script>
			var child={
				template:'#child',
				
			}
			new Vue({
				el:'#app',
				data:{
					title:"根组件",
					list:[
						{id:1,name:'张三'},
						{id:2,name:'李四'},
						{id:3,name:'王五'},
						{id:4,name:'赵六'},
					]
				},
				components:{
					child
				}
			})
		</script>
	</body>
</html>

例如以上代码，在组件内显示头部和内容区域以及底部，那么就需要在组件定义具名插槽，然后在使用的时候只需要slot='插槽名称'就可以了，如果没有指定名称，会被视为默认插槽

3.作用域插槽 

有时候，我们在使用插槽的时候，希望父组件可以控制插槽的内容，

什么时候用作用域插槽呢？当子组件做循环或者某一部分它的DOM结构应该由外部传递进来的时候，这个时候我们用作用域插槽

使用作用域插槽，子组件会向父组件的作用域里传递数据。 

父组件使用插槽，要包含在template标签中。item是自定义的名字 会接受传递来的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{title}}</div>
			<child :list="list">
				<template scope="item">
					<ul>
						<li>{{item}}</li>
					</ul>
				</template>
			</child>
		</div>
		<script type="text/template" id="child">
			<div>
				
					<slot v-for="(item,index) in list" :items="item"></slot>
				
			</div>
		</script>
		<script>
			var child={
				template:'#child',
				props:['list']
			}
			new Vue({
				el:'#app',
				data:{
					title:"根组件",
					list:[
						{id:1,name:'张三'},
						{id:2,name:'李四'},
						{id:3,name:'王五'},
						{id:4,name:'赵六'},
					]
				},
				components:{
					child
				}
			})
		</script>
	</body>
</html>

页面呈现的内容如下

image.png

如果我们使用作用域插槽，需要注意，在组件中先抛出变量，然后使用template包裹元素，使用scope接受变量


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。