Vue學習筆記 （插槽）

插槽

在模板中定義插槽預留空間，在HTML的組件標籤中嵌入需求代碼來使用插槽。

在組件化開發中，除了公用的代碼之外，儘可能讓需求變化大的代碼都用插槽代替。

插槽可以有默認值，該默認值定義在<slot></slot>標籤中，當定義了插槽卻沒有顯式嵌入功能時，該默認代碼將被使用。

在只有一個插槽時，無論嵌入時定義了多少代碼都會生效。

在定義了多個插槽時，爲了精確的替換或嵌入其中某個插槽，可以給每個插槽起一個名字，即具名插槽。

<cpn><button slot="center">主頁</button></cpn> //僅替換了name爲center的插槽

<template>
	<slot name="left"><span>返回</span><slot>
	<slot name="center"><span>搜索框</span><slot>
	<slot name="right"><span>菜單</span><slot>
</template>

編譯作用域：已知父組件與子組件，在父組件標籤下的任何數據與屬性都只會訪問父組件中的data，而在子組件的template中的屬性與數據訪問纔會訪問子組件的data。

當父插槽想要使用子組件中的data時，因爲編譯作用域的問題，父組件無法獲取子組件中的data，這時可以使用作用域插槽，將子組件中的數據作爲插槽的屬性供父組件調用。

<div id="app">
	<cpn>
		<template v-slot="slotProps"> //slotProps是一個別名，可以隨意起
			<ul>
				<li v-for="sport in slotProps.data">#{{sport}}</li> //這裏可以直接引用data屬性
			</ul>
		</template>
	</cpn>
</div>

<template id="cpn">
	<div>
		<slot :data="sports"> #將sports數據作爲data屬性傳入，屬性名可以隨便起，這裏是data
			<ul>
				<li v-for="sport in sports">{{sport}}</li>
			</ul>
		</slot>
	</div>
</template>
<script>
	new Vue({
		el:'#app',
		components:{
			cpn:{
				template:'#cpn',
				data(){
					return{
						sports : ['籃球','羽毛球','足球','乒乓球','冰球']
					}
				}
			}
		}
	})
</script>