Vue:作用域插槽

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

在这里插入图片描述

发布了22 篇原创文章 · 获赞 22 · 访问量 1252
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章