第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY06-組件與屬性

組件與屬性

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

名詞解釋

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

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

組件

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

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

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

屬性

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

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

小結

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *