Cách xuất các hàm và biến từ một thành phần Svelte

Tìm hiểu cách xuất các hàm và biến từ một thành phần Svelte

Bạn biết rằng bạn có thể nhập một thành phần Svelte vào một thành phần khác bằng cú pháp

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

Điều gì sẽ xảy ra nếu bạn muốn xuất một thứ gì đó nhiều hơn xuất mặc định?

Vâng, bạn phải xuất nó từ mộtscriptvào thành phần, vớicontext="module"thuộc tính.

Đây là một ví dụ. Giả sử bạn có thành phần Nút trongButton.svelte:

<button>A button</button>

và bạn muốn cung cấp cho các thành phần khác khả năng thay đổi màu của nút. Bạn có thể sử dụng đạo cụ, đó là một ví dụ. Hoặc bạn có thể cung cấp một chức năng, được gọi làchangeColor.

Bạn viết và xuất nó trong đặc biệt nàyscriptnhãn:

<script context="module">
export function changeColor() {
  //...add logic..
}
</script>

<button>A button</button>

Cảnh báo: Tôi đã không triển khai chức năng thực tế, nhưng bạn có ý tưởng.

Lưu ý rằng bạn có thể có một thẻ tập lệnh “bình thường” khác trong thành phần.

Giờ đây, các thành phần khác có thể nhập Nút, đây là nút xuất mặc định vàchangeColorchức năng quá:

<script>
import Button, { changeColor } from './Button.svelte'
</script>

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


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