Svelte 之使用其他 Component | 點燈坊

Svelte 要使用其他 Component 很簡單，只要使用 ECMAScript 2015 的 import 進來就可使用。

Version

macOS Catalina 10.15.1
WebStorm 2019.2.4
Svelte 3.0.0

Nested Component

src/Nested.svelte

<p>Hello World</p>

只要 extension 是 .svelte 就是 component。

Svelte 的 component 習慣以 PascalCase 命名。

Root Component

src/App.svelte

<script>
import Nested from './Nested.svelte'
</script>

<Nested/>

使用 ES6 的 import 匯入其他 component，且必須使用 default import 自己命名，習慣會與 component 檔名一樣，但若要自行另外命名也是可行。

HTML 的 component 名稱可使用 </> 自行結尾，不像 Vue 必須使用 <Nested></Nested> 寫法。

Conclusion

• Svelte 要使用其他 component，只需 import 進來即可，不必如 Vue 一樣必須在 Vue instance 的 components property 下宣告 component

Reference

Svelte, Nested components