使用slot分发内容

最新推荐文章于 2022-05-05 23:06:41 发布

ly_yanbo

最新推荐文章于 2022-05-05 23:06:41 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/ly_yanbo/article/details/89356387

版权

一、单个slot

在子组件内使用特殊的< slot >元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件< slot >标签及它的内容。示例代码如下：

<body>
		<div id="app">
			<child-component>
				<p>分发的内容</p>
				<p>更多分发的内容</p>
			</child-component>
		</div>
		
		<template id="tmp">
			<div class="main">
				<slot>
					<p>如果父组件没有插入内容，我将作为默认出现</p>
				</slot>
			</div>
		</template>
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('child-component',{
				template: '#tmp'
			});
			var vm = new Vue({
				el: "#app",
				data: {
				}
			})
		</script>
	</body>

子组件 child-component 的模板内定义了一个< slot >元素，并且用一个< p >作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，那就会替换整个< slot >。所以上例渲染后的结果为：

<div id = "app">
	<div>
		<p>分发的内容</p>
		<p>更多分发的内容</p>
	</div>
</div>

二、具名slot

给< slot >元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存，例如下面的示例：

<body>
		<div id="app">
			<child-component>
				<h2 slot = "header">标题</h2>
				<p>正文内容</p>
				<p>更多正文内容</p>
				<div slot = "footer">底部信息</div>
			</child-component>
		</div>
		
		<template id="tmp">
			<div>
				<div class="header">
					<slot name = "header"></slot>
				</div>
				<div class="main">
					<slot></slot>
				</div>
				<div class="footer">
					<slot name = "footer"></slot>
				</div>
			</div>
		</template>
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('child-component',{
				template: '#tmp'
			});
			var vm = new Vue({
				el: '#app',
				data: {
					
				}
			})
		</script>
	</body>

子组件内声明了3个< slot >元素，其中在< div class = “main”>内的< slot >没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将出现在这里。如果没有指定默认的匿名slot，父组件内多余的内容片段都将被抛弃。
上例最终渲染后的结果为：

<div id = "app">
	<div class = "container">
		<div class = "header">
			<h2>标题</h2>
		</div>
		<div class = "main">
			<p>正文内容</p>
			<p>更多正文内容</p>
		</div>
		<div class = "footer">
			<div>底部信息</div>
		</div>
	</div>
</div>

三、访问slot

<body>
		<div id="app">
			<child-component>
				<h2 slot = "header">标题</h2>
				<p>正文内容</p>
				<p>更多的正文内容</p>
				<div slot = "footer">底部信息</div>
			</child-component>
		</div>
		
		<template id="tmp">
			<div class="container">
				<div class="header">
					<slot name = "header"></slot>
				</div>
				<div class="main">
					<slot></slot>
				</div>
				<div class="footer">
					<slot name = "footer"></slot>
				</div>
			</div>
		</template>
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('child-component',{
				template: '#tmp',
				mounted: function () {
					var header = this.$slots.header;
					var main = this.$slots.default;
					var footer = this.$slots.footer;
					console.log(footer);
					console.log(footer[0].elm.innerHTML);
				}
			});
			var vm = new Vue({
				el: '#app',
				data: {
					
				}
			})
		</script>
	</body>

通过$slots可以访问某个具名slot，this. $slots.default包括了所有没有被包含在具名slot中的节点。尝试编写代码，查看两个console打印的内容。

四、作用域插槽

作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。

<body>
		<div id="app">
			<child-component>
				<template scope = "props">
					<p>来自父组件的内容</p>
					<p>{{ props.msg }}</p>
				</template>
			</child-component>
		</div>
		
		<template id="tmp">
			<div>
				<slot msg = "来自子组件的内容"></slot>
			</div>
		</template>
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('child-component',{
				template: '#tmp',
			});
			var vm = new Vue({
				el: '#app',
			})
		</script>
	</body>

在< slot>元素上有一个类似props传递数据给组件的写法 msg = “xxx”，将数据传到了插槽。父组件中使用了< template >元素，而且拥有一个 scope = “props”的特性，这里的props只是一个临时变量，就像 v-for = “item in items”里面的item一样。template内可以通过临时变量 props访问来自子组件插槽的数据msg。
将上面的示例渲染后的最终结果为：

<div id = "app">
	<div class = "container">
		<p>来自父组件的内容</p>
		<p>来自子组件的内容</p>
	</div>
</div>

作用域插槽更具有代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项。示例代码如下：

<body>
		<div id="app">
			<my-list :books = "books">
				<template slot = "book" scope = "props">
					<li>{{ props.bookName }}</li>
				</template>
			</my-list>
		</div>
		
		<template id="tmp">
			<div>
				<ul>
					<slot name = "book"
						v-for = "book in books"
						:book-name = "book.name">
					</slot>
				</ul>
			</div>
		</template>
		<script type="text/javascript" src="../js/vue-2.4.0.js" ></script>
		<script>
			Vue.component('my-list',{
				props: {
					books: {
						type: Array,
						default: function () {
							return [];
						}
					}
				},
				template: '#tmp'
			});
			var vm = new Vue({
				el: "#app",
				data: {
					books: [
					{ name: '《Vue.js实战》' },
					{ name: '《JavaScript语言精粹》' },
					{ name: '《JavaScript高级程序设计》' }
					]
				}
			})
		</script>
	</body>

子组件 my-list接收一个来自父级的 prop 数组 books，并且将它在name 为book的solt上使用v-for指令循环，同时暴露 bookName。

ly_yanbo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用slot分发内容

一、单个slot在子组件内使用特殊的< slot >元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件< slot >标签及它的内容。示例代码如下：<body> <div id="app"> <child-component> <p>分发的内容<...
复制链接

扫一扫