Vue（五）插槽的使用

最新推荐文章于 2024-08-11 22:13:56 发布

原创最新推荐文章于 2024-08-11 22:13:56 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #插槽 #slot

Vue 专栏收录该内容

4 篇文章

订阅专栏

插槽分三种：普通插槽、具名插槽、作用域插槽

普通插槽

普通插槽的使用主要通过<slot></slot>标签使用。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插槽的使用</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			//未使用插槽
			<com></com>
			<hr color="red">
			//使用插槽
			<com><button type="button">插槽中放入按钮</button></com>
		</div>
		
		<template id="com">
			<div id="">
				<button type="button">左边按钮</button>
				<p>中间文字</p>
				<slot></slot>
			</div>	
		</template>
		
		<script type="text/javascript">
			new Vue({
				el: '#app',
				components:{
					com:{
						template:'#com'
					}
				}
			})
		</script>
	</body>
</html>

结果如下图，当使用插槽的时候可以在使用同一个Vue组件(component)的情况下在插槽位置放入不同的标签，如：程序中的按钮标签。
在这里插入图片描述

具名插槽

在同一个Vue组件(component)中，放入多个插槽，在使用组件时，如何判断放入的标签是哪个插槽中的呢？此时可以使用具名插槽。
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插槽的使用</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 未在插槽中放入相应的标签，使用默认值 -->
			<com></com>
			<hr color="red">
			<!-- 仅改变中间的插槽，左右插槽此时使用默认值 -->
			<com><span slot="center">仅改变中间的插槽</span></com>
			<hr color="#0000FF">
			<!-- 插槽全部更改 -->
			<com>
				<button type="button" slot="left">左边换为按钮</button>
				<span slot="center">改变中间</span>
				<img src="3.gif" slot="right">
			</com>
		</div>
		
		<template id="com">
			<div id="">
				<slot name="left"><span>左边</span></slot>
				<slot name="center"><span>中间</span></slot>
				<slot name="right"><span>右边</span></slot>
			</div>	
		</template>
		
		<script type="text/javascript">
			new Vue({
				el: '#app',
				components:{
					com:{
						template:'#com'
					}
				}
			})
		</script>
	</body>
</html>

在上述代码中<slot name="right">右边</slot>意为此插槽默认是右边标签，在使用Vue组件时不添加标签时，使用插槽中默认的标签。该插槽添加name属性，可以在使用时作为区分（区分在那个插槽中添加标签），使用时代码如：<com>仅改变中间的插槽</com>。程序运行结果如下图：
在这里插入图片描述

作用域插槽

作用域插槽是为了让同一Vue组件表现为不同的形式。（可以看作父组件提供插槽中表现形式，而Vue组件中提供数据），代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作用域插槽</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 插槽的默认形式 -->
			<com></com>
			<hr color="red">
			<!-- 更换插槽内标签 -->
			<com>
				<template slot-scope="slotdata">
					<!-- 接收Vue组件传出的值值是用slotdata.data -->
					<span>{{slotdata.data.join(' —— ')}}</span>
				</template>
			</com>
		</div>
		
		<template id="com">
			<div id="">
				<!-- 将mydata的值传出 -->
				<slot :data="mydata">
					<ul>
						<li v-for="item in mydata">{{item}}</li>
					</ul>
				</slot>
			</div>
		</template>
		
		<script type="text/javascript">
			var com = {
				template:'#com',
				data(){
					return {
						mydata:['C', 'C++', 'Java', 'JavaScript', 'html', 'Python']
					}
				}
			}
			
			new Vue({
				el:'#app',
				components:{
					com
				}
			})
		</script>
	</body>
</html>

上述代码实现了Vue组件的两种形式，一种是默认的，另一种是通过slot插槽实现的。结果如下图：
在这里插入图片描述
第一种是默认的，第二种是自定义的。
在程序中要想将Vue组件的私有数据传出，需要在slot标签中添加属性，如：<slot :data="mydata"></slot>其中“data”是可以自定义的名称，而“mydata”是数据源。
父组件接收数据时利用如下方式：

<com>
	<template slot-scope="slotdata">
		<!-- 接收Vue组件传出的值值是用slotdata.data -->
		<span>{{slotdata.data.join(' —— ')}}</span>
	</template>
</com>

com是自定义的Vue组件，在其中使用Vue的template标签(template标签在Vue2.5.x版本一下时必须要用，在Vue2.5.x以上版本时不是必须的)，在template标签中使用slot-scope属性来接收子组件的数据。并通过slotedata.data来得到子组件的数据。（**注意：**其中slotdata是自定义的名称，而data也是自定义的名称，但要与子组件中的slot标签属性中定义的相同）