Vue初学——插槽，具名插槽，作用域插槽

最新推荐文章于 2024-05-28 17:25:55 发布

尖兵果子

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量2.6k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wfy17030212/article/details/122412841

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

前言
一、插槽的基本使用
二、具名插槽
- 为什么需要具名插槽
三、作用域插槽
总结

前言

插槽，这个东西就和它的名字一样，是插在需要的地方的。
它的作用就好比是一个母版页，有固定的写好的东西，也有需要不断改变的东西。
又好比你写一个网站，而这个网站中有许多页面，而这几个页面中都有相似之处，但也有不同之处。
而这种内容，在vue中往往就要通过插槽slot来实现

提示：以下是本篇文章正文内容，下面案例可供参考

一、插槽的基本使用

在引用了vue后，有着一个叫slot的标签，只要写好这样一个标签，就会有了一个插槽。

<slot></slot>

当然也可以在里面写东西，这样一来，使用这个插槽就会默认显示这里面的东西

<slot>hello</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">
			<cpn1><button>按钮</button></cpn1>
			<cpn1><span>666</span></cpn1>
			<cpn1></cpn1>
			<cpn1><button>按钮</button></cpn1>
		</div>
	</body>
	
	<template id="cpn1">
		<div>
			<h2>我是组件</h2>
			<p>我是组件，哈哈哈</p>
			<slot>hello</slot>
		</div>
	</template>
	
	<script type="text/javascript">
		let content={
			template:'#cpn1'
		}
	
		let vm=new Vue({
			el:'#app',
			data:{
				
			},
			components:{
				cpn1:content
			}
		});
	</script>
</html>

在这里插入图片描述

如图所示，不适用插槽，组件的内容都是一样的，而使用了插槽，
这里叫做默认插槽，就会显示默认的数据，上图中hello就是默认的数据.
其他的，只要在插槽中写什么就是什么了

二、具名插槽

为什么需要具名插槽

假设有一下需求

一个网站需要多个导航栏，导航栏中的布局方式至少有两处不相同

那么如果是一个不相同我们还可以通过默认插槽实现，但如果有多个呢？默认插槽写多个它会怎么区分呢？
因此，我们引出了具名插槽，给定一个名字，这样就可以对应着提供数据了

它的写法如下

<slot name="center"></slot>

使用方法

<cpn1><button slot="center">牛逼</button></cpn1>

在组件中使用具名插槽的实例

<!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">
			<cpn1><button slot="center">牛逼</button></cpn1>
			<cpn1><span slot="right">Hello</span></cpn1>
		</div>
	</body>
	
	<template id="cpn1">
		<div>
			<h2>哈哈哈</h2>
			<slot name="left">left</slot>
			<slot name="center">center</slot>
			<slot name="right">right</slot>
		</div>
	</template>
	
	<script type="text/javascript">
		let content={
			template:'#cpn1'
		}
	
		let vm=new Vue({
			el:'#app',
			data:{
				
			},
			components:{
				cpn1:content
			}
		});
	</script>
</html>

在这里插入图片描述

三、作用域插槽

作用域插槽常用于表格之中

格式

<template slot-scope="scope">

其实这个东西不用在表格中是和普通插槽没有什么区别的，但当用在表格中后,就会很有用

<template slot-scope="scope">
	{{scope.row}}
</template>

	list:[
			{
				name:'平桥尖',
				creditCard:654321,
				sex:1,
				phone:12121212,
				org:'平桥卫生院'	
			},
			{
				name:'平桥兵',
				creditCard:123456,
				sex:1,
				phone:13131313,
				org:'平桥卫生院'	
			},
			{
				name:'平桥果',
				creditCard:789456,
				sex:2,
				phone:14141414,
				org:'平桥卫生院'	
			},
			{
				name:'平桥子',
				creditCard:321654,
				sex:2,
				phone:15151515,
				org:'平桥卫生院'	
			}
		]