Vue之componet之初识slot(029)

最新推荐文章于 2022-09-07 11:25:50 发布

从小白小菜开始

最新推荐文章于 2022-09-07 11:25:50 发布

阅读量340

点赞数 4

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_31707323/article/details/116381829

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

Vue之componet之初识slot

本人理解在组件内预留的类似占位符。便于功能扩展。
1.默认插槽。即不具名。一个不带 name 的出口会带有隐含的名字“default”。
完整示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<title>component-slot</title>
	</head>
	<body>
		<div id="app">
			<mycomponet></mycomponet>
		</div>
		<script>
			Vue.component("mycomponet", {
				template: `
			<div>
			<h3>I am componet</h3>
			<slot><h1>我是默认插槽</h1></slot>
			</div>
			`
			})
			new Vue({
				el: "#app",
			})
		</script>
	</body>
</html>

运行结果如图：
在这里插入图片描述

如果不在组件内给出具体替换内容则显示默认。如果既无默认，则不显示。
更改代码

<div id="app">
			<mycomponet></mycomponet>
			<mycomponet>
				<span>我来点新东西</span>
			</mycomponet>
		</div>

运行结果：
在这里插入图片描述
如果一个组件里有多个插槽，则需要具名插槽。完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<title>component-slot</title>
	</head>
	<body>
		<div id="app">
			<mycomponet>
				<span>我来点新东西</span>
				<template v-slot:myfirst>
					<h1>我是第一</h1>
				</template>
				<template v-slot:mysecond>
					<h2>我是第二</h2>
				</template>
				<template #mythird>
					<h3>我是第三</h3>
				</template>
			</mycomponet>
		</div>
		<script>
			Vue.component("mycomponet", {
				template: `
			<div>
			<h3>I am componet</h3>
			<slot name="myfirst" ><h1>我是默认插槽</h1></slot>
			<slot name="mysecond"></slot>
			<slot name="mythird"></slot>
			</div>
			`
			})
			new Vue({
				el: "#app",
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述
2.60版本后使用v-slot引入插槽名称，v-slot:可缩写为 # 。
总结：
具名插槽只有引引入名字后才替换。

从小白小菜开始

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
13
评论
Vue之componet之初识slot(029)

Vue之componet之初识slot本人理解在组件内预留的类似占位符。便于功能扩展。1.默认插槽。即不具名。完整示例。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>component-slot</title> </head> &
复制链接

扫一扫

专栏目录