HAPPY LIFE AND cODING

vue-slot 插槽

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>