Vue/React/Angular

Vue/React/Angular

所謂的組件就是一塊 HTML CSS JS 組合的網頁片段。

SPA 就是在一個頁面中反覆切換顯示所謂的組件，如果組件佔滿整個畫面，人們就會覺得換頁了。如果只是切換一部分，你就會覺得數據更新了。

路由就是在指示框架要切換什麼，所以一定要有路由出口才能顯示。框架也順便讓開發者可以放一些數據當參數以供被調用的組件使用。
框架再厲害也不可能超過瀏覽器的限制，也不可能改變 HTTP 的規矩。這就是為什麼三大框架概念這麼像的原因，因為大家都是在這些限制性實現 SPA 的樣子，所以解決方案自然英雄所見略同了。

Vue - Scoped Slot

Vue - Scoped Slot

總結一下 Vue Slot (這可能是Vue中比較難理解的東西)

Example: http://jsfiddle.net/albertdong/xnevpb0f/133/

slot 是為了處理子組件開口與閉口標籤之間的內容而生。這樣父組件就有機會改變一些子組件的內容。

<child>
想要插入的內容…
</child>

子組件用 slot 標籤預留插值位置，可以有名稱也可沒有(沒有名稱的名稱就叫做default)

父組件使用子組件(標籤)時，使用 template 標籤(非必要)將子組件開口與閉口標籤之間的內容取代上面子組件的slot標籤。

如果子組件聲明的 slot 標籤有名稱時父組件可以使用 slot 屬性指定名稱表示要放在哪個 slot，否則都會取代那個沒有名稱的 default slot 。