vue-slot 插槽

vue 中的插槽(slot)，如果用日常生活中來解釋，就好比電源插座有許多孔，當某天我手機需要充電時，就把手機充電器插上去。如在直白一點來講，就是父組件想往子組件安插東西，所以子組件需要預留空位子，給父祖件。

一般來說，父祖件在引入子組件時，通常就 <Child></Child> 就結束了。但是我在子組件標籤內部加點內容，並讓子組件顯示出來，像是這樣 <Child>哈囉!你好</Child>，該怎麼做呢?這就是用到Slot插槽時後了!

vue-slot 插槽基本上可以分為3種使用方式，分別為: (1) 基本使用 (2)具名插槽 (3)作用域插槽

基本使用

在父組件中，引用子組件，並在子組件中間，寫下要顯示內容。然後子組件的html中，須使用 <slot>標籤，代表示預留內容給父祖件顯示的。如果當父祖件，沒傳內容，則會顯示，子組件預設內容。

<!--父組件 -->
<div class="box1">
    <p>box1</p>
    <Child> 我是父組件的文字</Child>
</div>

<!--子組件 -->
<template>
    <div class="main">
	<slot>這是子組件預設文字</slot>
    </div>
</template>

結果如下:

具名插槽

顧名思義，就是幫插槽取名子，並指定插槽來使用。不多說直接上代碼。

如果要使用具名插槽，父組件引用的子組件需要用 <template>包起來，並且使用 v-slot:對應slot的名子，才可使用。

作用域插槽

作用域插槽，說白話文:就是，子組件把自己的data，藉由slot的屬性拋出去給父組件來使用。基本上這功能，比較沒在使用，目前也想不到什麼情境下會需要用到。但還是做個筆記，記錄一下。

首先子組件，裡面的 data 中的 userInfor 把它用slot屬性傳給父組件，並且在父組件，去定義 v-slot:default=”myInfo”來當接收屬性的名子，然後就可以把子組件資料拿出來用。但說真的，到底甚麼時候會這樣用??我現在還是問號 = =??

<!--父組件-->
<div class="box3">
    <p>BOX3</p>
    <Child>	
	<template v-slot:default="myInfo">
	    我是父組件box3
	    {{myInfo.userInfor}}
	</template>
     </Child>
</div>

<!-- 子組件 -->
<template>
    <div class="main">
        <slot :userInfor="userInfor">子組件slot </slot> 
    </div>
</template>
<script>
export default {
    name: 'Child',
    data(){
	return{
	   userInfor:{
		name:'jessica',
		age:18
	   }
	}
    }
}
</script>