Vue：作用域插槽

最新推荐文章于 2024-09-24 10:18:03 发布

原创最新推荐文章于 2024-09-24 10:18:03 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #作用域插槽

vue.js 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Vue中作用域插槽的使用方法，包括如何通过template标签和slot-scope属性实现父组件向子组件传递模板，以及如何在子组件中使用v-for循环遍历数据并展示。

作用域插槽必须是template开头结尾
使用 slot-scope="props"来接收数据，这里的props是自定义的
使用这种方式的时候显示什么，怎么显示不再是子组件决定了，而是父组件调子组件的时候给子组件传递模版

<body>
		<div id="app">
			<child>
				<template slot-scope="props">
					<li>{{props.item}}</li>
				</template>
			</child>
		</div>
		<script>
			Vue.component('child',{
				data: function() {
					return {
						list: [1,2,3,4]
					}
				},
				template: `<div>
							<ul>
								<slot
									v-for="item of list"
									:item=item
								></slot>
							</ul>
						   </div>`
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>

在这里插入图片描述