了解v-slot基本應用!打造一個簡單的名言紀錄器(30 Days challeng-11)

前言

一般來說在做vue專案時，若需要配合v-for做render，我直覺的作法就是用bind傳入props，然後在子元件決定要怎麼呈現接收到的資料。今天看了一下發現slot也可以做到相同的事情，也想順便複習一下vuetify的東西，於是就做了這個簡單的名言紀錄器。

使用技術

vue-slot基本介紹

首先可以先看一下官方文件，說明的其實算蠻清楚，不過初次接觸時可能會覺得觀念有些抽象。
slot就如字面意義一樣，是一個插槽，大致原理就是在子元件中建立一個插槽，接著在父元件決定插槽的內容，我們看一下一個簡單的範例。

原諒我用圖片表示，有點不清楚我知道，但大致可以表達一下slot的基本用途。
不過這是最基本、最單純的一個內容對一個插槽的情況，那要是有多個內容與多個插槽又該怎麼處理呢?
這時候我們需要靠slot&name屬性來處理，或是你也可以直接使用較新的v-slot用法!一樣我們看一下以下的範例。

由範例你可以知道，在父元件加上slot屬性對應到子元件的name屬性就可以讓vue知道哪個插槽要對哪個內容，值得注意的是沒有被分配到插槽的內容全部都會存到預設的插槽內，所以上方的例子最下面的slot還是能接收到那段I am default slot的內容。

專案說明

對slot有基本了解後我們就可以來看一下我們的簡單專案了，每一張card會對應到一段quote的內容(這也是我使用slot的地方)，當你新增quote之後會有簡單的提示與進度條跑動，點擊quote便會直接刪除。每個使用者最多可以持有10個quote，反正太多你也記不住:D

專案預覽

專案連結

發表者：windate3411