Vue：作用域插槽

最新推荐文章于 2024-06-01 21:28:55 发布

Boxbiu

最新推荐文章于 2024-06-01 21:28:55 发布

阅读量207

点赞数 1

分类专栏： vue.js 文章标签： Vue 作用域插槽

本文链接：https://blog.csdn.net/Boxbiu/article/details/103209259

版权

vue.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

作用域插槽必须是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>

在这里插入图片描述