組件與屬性

昨天我們介紹了變數的宣告以及如何在html上使用變數，今天要更進一步說明屬性以及組件。

名詞解釋

說中文可能讀者們不知道筆者在說些什麼，簡單講組件就是 component ，而屬性就是 property 。

接下來再針對這兩個更進一步說明。

組件

近年來很多語言都有這種觀念，程式是由許多組件所組成的，因此每個組件都可以被覆用，如此更新一個組件所有使用到他的地方都會被更新，如此可以減少維護的成本。

在svelte來說每個svelte檔案就是一個組件，所以說App.svelte也是個組件，今天我們多加一個組件 HelloWorld 將 App.svelte 的功能抽離出來，讓他專心當個程式進入點，所以新加一個 HelloWorld.svelte 如下所示。

接下來只要將原來 App.svelte 的內容更改一下，在 script 內 import 組件進來並把它當成 html tag 即可，所以結果如下所示，這樣就將我們的程式拆成兩個組件了。

屬性

簡單講屬性就是專屬於組件的變數，其他組件可以透過屬性將變數或是方法傳遞給屬性，例如我們希望由 App 這個組件來決定 HelloWorld 要顯示的名稱我們只要這麼做，首先將 HelloWorld 的變數使用 export 宣告如下所示。

再將使用組件的組件做以下兩種方式給值。
如此我們就可以透過外部組件決定屬性的值了。

小結

今天教授大家關於組件的觀念，並且透過屬性來更新組件的內容，當然這不是唯一的方法，之後會在告訴大家其他變更組件的方式，在明天準備告訴大家如何在 html 內做邏輯判斷。