iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
Modern Web

前端工程的另一個選擇 Svelte 系列 第 6

DAY06-組件與屬性

組件與屬性

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

本文同步放置於此

名詞解釋

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

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

組件

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

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

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

屬性

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

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

小結

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


上一篇
DAY05-變數的用法
下一篇
DAY07-foreach也來幫忙
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
PeterLiao
iT邦新手 4 級 ‧ 2019-09-08 17:30:50

是不是來得及重報,看一下規則,看你在第二天失敗但依然有在天天發文,很可惜

kirai iT邦新手 4 級 ‧ 2019-09-08 23:24:00 檢舉

謝謝你的支持,有大家的支持我會繼續寫完的。

我要留言

立即登入留言