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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章