昨天我們介紹了變數的宣告以及如何在html上使用變數,今天要更進一步說明屬性以及組件。
本文同步放置於此
說中文可能讀者們不知道筆者在說些什麼,簡單講組件就是component
,而屬性就是property
。
接下來再針對這兩個更進一步說明。
近年來很多語言都有這種觀念,程式是由許多組件所組成的,因此每個組件都可以被覆用,如此更新一個組件所有使用到他的地方都會被更新,如此可以減少維護的成本。
在svelte來說每個svelte檔案就是一個組件,所以說App.svelte也是個組件,今天我們多加一個組件HelloWorld
將App.svelte的功能抽離出來,讓他專心當個程式進入點,所以新加一個HelloWorld.svelte
如下所示。
接下來只要將原來App.svelte的內容更改一下,在script
內import
組件進來並把它當成html tag即可,所以結果如下所示,這樣就將我們的程式拆成兩個組件了。
簡單講屬性就是專屬於組件的變數,其他組件可以透過屬性將變數或是方法傳遞給屬性,例如我們希望由App這個組件來決定HelloWorld 要顯示的名稱我們只要這麼做,首先將HelloWorld的變數使用export
宣告如下所示。
再將使用組件的組件做以下兩種方式給值。
如此我們就可以透過外部組件決定屬性的值了。
今天教授大家關於組件的觀念,並且透過屬性來更新組件的內容,當然這不是唯一的方法,之後會在告訴大家其他變更組件的方式,在明天準備告訴大家如何在html內做邏輯判斷。
是不是來得及重報,看一下規則,看你在第二天失敗但依然有在天天發文,很可惜
謝謝你的支持,有大家的支持我會繼續寫完的。