https://codepen.io/hereiscasio/pen/eYOomxO?editors=1010

延續昨天的程式碼，今天專門介紹 Vue-portal，它來自於 React 的 Protal，只不過是 Vue 的版本，由 Vue 的一個 core team member 維護，但並非像 React 一樣，屬於 Vue 的核心功能，這是可以理解的，因為 Vue 連 http lib 都建議拿第三方的來用，更別說這個相當進階（ 甚至我覺得這個東西在實際使用上 . . . 有時要很有創意 . . . 但太有創意似乎不是件好事啊 ）的 Vue-portal 了

這個第三方套件跟 Vuetify 有什麼關係呢？其實一點關係都沒有，只是因為用了它，程式碼有簡化一定幅度，並且我也想在這個系列文中，把 Vuetify 跟其它第三方套件做整合示範。這個套件的作用就是你先把一些標籤定義在 <portal> 裡，並指定它去把這些標籤塞到某個 <portal-target> 裡，所以簡單來講就是定義在 portal 裡面的東西，通常是有實際需要被複用

那 . . . Google News 裡面哪些東西需要被復用？很明顯每張卡片是重複的，但這部分靠 v-for 就能處理掉了，還沒必要用上 Vue-portal（ i.e. 沒事別亂用 Vue-portal，這也是雙面刃，亂用很容易把事情複雜化，一般是不太會用到才是 ），另一個重複的元素其實就是每張卡片裡面的標題（ 及標題下方的小字 ）

這些元素雖然是重複的，但在卡片中的這種元素第一個，右邊有圖片，字體較大並且還是粗體，這暗示了一件事，這些元素要是再次透過 v-for 處理，你等於是造了在 Vue template 裡面製造了曹狀 for 迴圈，而且還要加很多判斷式做處理，要搞一定搞得出來，只是這樣會很難維護，這時就要透過其它方式（ 因為 Codepen 無法使用 Vue SFC，所以我才會選擇 Vue-portal ）

<portal to='headlineArchitecture'>
    <template slot-scope='{title, subTitle, hover}'>
        <span>{{title}}</span>
        <span>{{subTitle}}</span>
        <v-row v-if='hover'> ... </v-row> 
    </template>
</portal>

<portal-target
    name='headlineArchitecture' :slot-props='{hover, title: ..., subTitle: ...}'>
</portal-target>

所以這個 portal 會把這些標籤渲染到名為 headlineArchitecture 的 <portal-target>，值得一提的是，我們是使用了 portal 進階版的功能：透過傳給地不同的 slot props（ 如 title, subTitle ），可以渲染出不同的內容