Cách nhập các thành phần trong Svelte

Tìm hiểu cách nhập các thành phần trong Svelte

Svelte cung cấp các thành phần tệp đơn lẻ. Mọi thành phần được khai báo thành một.sveltevà trong đó bạn có thể viết mã đánh dấu HTML, CSS và JavaScript cần thiết.

Đây là một ví dụ về thành phần Svelte đơn giản, sống trong một tệp có tênButton.svelte:

<button>A button</button>

Bạncó thểthêm CSS và JS vào thành phần này, nhưng đánh dấu HTML thuần túy này đã là đánh dấu của thành phần, không cần phải bọc nó trong một thẻ đặc biệt khác hoặc bất cứ thứ gì.

Để xuất đánh dấu này từ thành phần này, bạn không phải làm bất cứ điều gì. Bây giờ bạn có thể nhập nó vào bất kỳ thành phần Svelte nào khác bằng cách sử dụngimport ComponentName from 'componentPath'cú pháp:

<script>
import Button from './Button.svelte';
</script>

Và bây giờ bạn có thể sử dụng thành phần mới được nhập trong đánh dấu, như thẻ HTML:

<Button />

Tải xuống miễn phí của tôiSổ tay Svelte


Các hướng dẫn nhỏ gọn hơn: