使用slot,让组件更具有复用性

最新推荐文章于 2024-04-04 15:39:06 发布

初晨未凉

最新推荐文章于 2024-04-04 15:39:06 发布

阅读量234

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45638909/article/details/113662885

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

1.普通子组件

问题：比如在下面中的插件，我们想在其中一个下面添加按钮，其他的不添加，下面这种是实现不了的，所以我们需要插条slot来实现。
插条理解：抽取不同，保留共性
更改之前的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>我是组件</h2>
				<p>我是内容</p>
			</div>
		</template>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好啊'
				},
				components:{
					cpn:{
						template:'#cpn'
					}
				}
			})
			
		</script>
	</body>
</html>

在这里插入图片描述

加了插条以后的

1.基本插条用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn><button>按钮</button></cpn>
			<cpn><i>我是插条内容</i></cpn>
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>我是组件</h2>
				<p>我是内容</p>
				<!-- //插条可以指定默认值 -->
				<slot>我是插条默认值</slot>
			</div>
		</template>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好啊'
				},
				components:{
					cpn:{
						template:'#cpn'
					}
				}
			})
			
		</script>
	</body>
</html>

在这里插入图片描述

2.具名插条（给插条一个name）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn>标题</cpn>
			<cpn><button slot="left">按钮</button></cpn>
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div>
				<!-- //插条可以指定默认值 -->
				<slot name="left">我是左边默认值</slot>
				<slot name="center">我是中间默认值</slot>
				<slot name="right">我是右边默认值</slot>
				<slot>我是没有name的默认值</slot>
			</div>
		</template>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好啊'
				},
				components:{
					cpn:{
						template:'#cpn'
					}
				}
			})
			
		</script>
	</body>
</html>

在这里插入图片描述

初晨未凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用slot,让组件更具有复用性

1.普通子组件问题：比如在下面中的插件，我们想在其中一个下面添加按钮，其他的不添加，下面这种是实现不了的，所以我们需要插条slot来实现。插条理解：抽取不同，保留共性更改之前的：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app">
复制链接

扫一扫