這邊接續著上一篇”Vuejs元件02-emit事件”的文章，繼續做筆記。

元件插槽

有時候我們需要替換某些元件的部分內容，而Vue.js就是利用元件插槽的概念來做到這件事情。
這邊會介紹三種狀況

沒有插槽的元件
單一插槽的元件
具名插槽

沒有插槽的元件

以上範例，你會看到我在no-slot-component中間插入了一個p段落，但是，畫面上並沒有呈現這個插入的p段落，
而這個就是若你在沒有插槽的元件中，插入其他內容，而這些插入的內容是不會被呈現在畫面上的。

單一插槽的元件

以上這個範例你會看到在單一插槽元件定義它元件內容的地方，我們有放一個<slot></slot>標籤，
那此時，夾在single-slot-component標籤中間的p段落的內容，在網頁上就會呈現在<slot></slot>標籤的位置囉。

slot標籤內的內容是預設的內容

如果，我們的slot標籤中有放入內容的話，會發生什麼事呢?
ex:

---HTML---
<div id="app">
	<h2>單一插槽可替換的狀態</h2>
	<single-slot-component>
	</single-slot-component>
	<single-slot-component>
		<p>這是一個插入的段落</p>
	</single-slot-component>
</div>


---JavaScript---

<script type="text/x-template" id="singleSlotComponent">
	<div class="alert alert-warning">
		<h6>我是一個元件</h6>
		<slot>
			若沒有插入內容時，呈現這段文字
		</slot>
	</div>
</script>
<script>
	Vue.component('single-slot-component',{
		template:'#singleSlotComponent'
	});
	var app = new Vue({
		el: '#app',
		data:{
		
		}
	})
</script>

你會發現，在沒有插入p段落的元件中會呈現”若沒有插入內容時，呈現這段文字”的內容，若是有插入p段落的元件，它的slot就會被取代，
也就是說slot的內容會是在沒有任何插入元件時的預設內容。

具名插槽

當我們有多個元素想要插入某個元件的時候我們就需要用具名插槽的技術了。

以上這個範例你可以看到，
在named-slot-component的x-template的定義元件的地方，我們會將想要替換的部分加上<slot></slot>，
接著，我們會在這些slot標籤上綁定一些name屬性，而這些名稱就是對應到要替換的目標的名稱，
再來，你在這些要替換掉slot的元件的html標籤中，綁定上slot屬性，而這些slot的屬性內的值，就是你剛剛在各個相對應slot標籤中所命名的name值，
如此你就可以用這些目標元件slot屬性名稱將 slot元件的name屬性名稱和相同的部分給替換掉。

不希望插入的元件的html標籤顯示在網頁上

你可以看到以上這個範例中，在我們想要插入的插槽中，有些html標籤是header有些是template，
簡單來說，用template標籤的插槽元件，它的html標籤並不會呈現在網頁上，
所以，如果我們不希望替換掉slot的元件的html標籤出現在瀏覽器上的話你就用template。
也就是說，如果不是用template的話，那你在一個a連結的裡面的插槽直接用a連結取代，會變成

---HTML---
<a slot="btn" href="#">替代按鈕</a>

---JavaScript---
<a href="#"> 
  <slot name="btn>預設按鈕</slot>
</a>

---最終結果---
<a href="#"> 
  <a href="#">替代按鈕</a>
</a>

上面這麼範例，雖然，內容是有被取代了，但是，裡面會再多一個a連結，但這通常不是我們想要的效果。
所以，用template的HTML標籤，就可以消除以上這種結果:

---HTML---
<template slot="btn" href="#">替代按鈕</template>

---JavaScript---
<a href="#"> 
  <slot name="btn>預設按鈕</slot>
</a>

---最終結果---
<a href="#"> 
  替代按鈕
</a>

上面這樣子正常多了XDD

is動態綁定元件

以上這個範例，你可以看到我們利用is來動態綁定current屬性，而current的值，會隨著我們按下”藍綠色元件”和”紅色元件”做切換，
分別會帶入”danger-component”或”primary-component”，此時，is就會透過current去吃到這些值，也就連帶的可以改變元件的樣式囉。

Landy Blog

Vuejs元件03-元件插槽