vue學習

vue插槽slot的學習

上節我們講了預設的插槽，這節我們來講具名插槽。 當我們在引用child子元件時，我們可以在標籤中加入自定義個內容，通過在子元件中加入slot來使child標籤中的內容得到渲染，但這又一個弊端，也就是我在引用的child元件標籤中新增的所有自定義內容，統統在這一個標籤中顯示，但假如我自定的內容，想要部分顯示在頭部，部分顯示在尾部，又要如何去處理呢？當然，只要你想，那便有辦法實現。 具名插槽，顧名思義便是有名字的插槽，也就是說，用名字來區分插槽，怎麼樣，說到這裡是否有了些許思路。==》 我們在子元件中多定義幾個slot 並起不同的名字不就行了嗎？ 話不多說，上程式碼：

//child 的模板
<template>
	<div class="container">
		//名為header的插槽，父元件自定義內容時，引用slot="header" 那麼所有的內容就會在這裡顯示
	    <slot name="header"></slot>
	    //沒有呼叫插槽的內容，將全部顯示在這裡，也即是預設插槽
	    <slot></slot>
	    // 當然，這裡就是footer咯
	    <slot name="footer"></slot>
	</div>
</template>
 

//父元件引用child
<child>
	//不客氣了，我先來，我用header這個插槽啊
	<template  slot="header">
		既然我用了header這個插槽，那我在渲染的時候將顯示在頂部啊
	</template>
	//我是footer為了證明我的位置是根據子元件插槽位置來定的，我先來了，但我依然會顯示在底部
	//同時為了證明我不一定非要用template模板，那我就不用啦
	<p slot="footer">
		我是footer啊，雖然我在自定義的時候位置靠上，但子元件footer插槽在最下面，所以我會顯示在底部啊
	</p>
	//再然後就是預設的啦，有些內容，不需要用具名插槽控制位置啊，只要顯示就行啦
	<h1>haha,我將顯示在預設插槽中哦</h1>
	<h2>同樣的我也在預設插槽中</h2>
</child>
 

哎呀，差不多了，就這些，夠通俗易懂吧，下節我們將作用域插槽，更牛逼。