Cách làm việc với các đạo cụ trong Svelte

Tìm hiểu cách làm việc với các đạo cụ trong Svelte và để hai thành phần có mối quan hệ cha / con giao tiếp với nhau

Bạn có thể nhập một thành phần Svelte vào bất kỳ thành phần nào khác bằng cú phápimport ComponentName from 'componentPath':

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

Đường dẫn liên quan đến đường dẫn thành phần hiện tại../có nghĩa là "cùng một thư mục này". Bạn sẽ sử dụng../để quay lại một thư mục, v.v.

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

<SignupForm />

Bằng cách này, bạn đang hình thành mối quan hệ cha / con giữa hai thành phần: thành phần nhập khẩu và thành phần được nhập khẩu.

Thường thì bạn muốn thành phần mẹ truyền dữ liệu cho thành phần con.

Bạn có thể làm như vậy bằng cách sử dụngđạo cụ. Các đạo cụ hoạt động tương tự như các thuộc tính trong HTML thuần túy và chúng là một hình thức giao tiếp một chiều.

Trong ví dụ này, chúng tôi vượt quadisabledchống đỡ, chuyển giá trị JavaScripttruevới nó:

<SignupForm disabled={true}/>

Trong thành phần SignupForm, bạn cầnxuất khẩucácdisabledchống đỡ, theo cách này:

<script>
  export let disabled
</script>

Đây là cách bạn thể hiện sự thật rằng phần hỗ trợ được tiếp xúc với các thành phần mẹ.

Khi sử dụng thành phần, bạn có thể chuyển một biến thay vì một giá trị, để thay đổi nó một cách động:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
</script>

<SignupForm disabled={disabled}/>

Khi màdisabledgiá trị biến thay đổi, thành phần con sẽ được cập nhật với giá trị prop mới. Thí dụ:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
setTimeout(() => { disabled = false }, 2000)
</script>

<SignupForm disabled={disabled}/>

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


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