Cách sử dụng Slots trong Svelte

Svelte cung cấp các cách khác nhau để các thành phần giao tiếp với nhau, bao gồm đạo cụ, khe cắm, v.v. Bạn sẽ cần tích hợp các khe cắm để tạo các thành phần linh hoạt và có thể tái sử dụng trong ứng dụng Svelte của mình.

Tìm hiểu về Slots trong Svelte

Trong ngữ cảnh của khung Svelte, các vị trí hoạt động tương tự như các đối tác của chúng trong hệ sinh thái Vue bằng cách cho phép truyền dữ liệu từ phần tử gốc sang thành phần con thông qua các không gian giữ chỗ được chỉ định trong bố cục của phần sau.

Làm việc với các vị trí trong Svelte cho phép đạt được mức độ linh hoạt cao trong việc tạo các thành phần có thể được điều chỉnh cho phù hợp với nhiều tình huống khác nhau thông qua việc sử dụng văn bản thuần túy, đánh dấu HTML hoặc các thành phần Svelte bổ sung. Việc kết hợp các khe cắm tạo điều kiện phát triển các yếu tố linh hoạt và dễ thích ứng nhằm đáp ứng các nhu cầu đa dạng.

Tạo một vị trí cơ bản

Để kết hợp một vị trí trong bố cục của thành phần Svelte, hãy sử dụng cấu trúc được đặt bên trong mẫu của thành phần nói trên. Trình giữ chỗ này được thiết kế để chấp nhận và hiển thị tài liệu có nguồn gốc từ thực thể mẹ tương ứng của nó. Đồng thời, theo mặc định, vị trí này sẽ hiển thị bất kỳ nội dung nào tình cờ được đưa vào nó.

Có thể đạt được việc kết hợp các vị trí trong hàm do người dùng xác định bằng cách xác định từng tham số bắt buộc trong chữ ký của hàm, như minh họa bên dưới:

 <main>
  This is the child component
  <slot></slot>
</main>

Đoạn mã được cung cấp hiển thị một phiên bản của thành phần con, sử dụng một khu vực được chỉ định gọi là “khe” để nhận nội dung từ thành phần chính được liên kết của nó.

Để truyền dữ liệu từ phần tử cha đến phần tử con trong quá trình phát triển web, trước tiên người ta phải đưa phần tử con vào phần tử cha bằng cách nhập. Sau đó, thay vì sử dụng đánh dấu tự kết thúc để hiển thị phần tử con, hãy sử dụng cả điểm đánh dấu mở và đóng. Cuối cùng, trong giới hạn của các thẻ bao gồm, hãy trình bày rõ ràng thông tin dự định được truyền tải giữa các phần tử cha và con.

Ví dụ:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span>This is a message from the parent component</span>
 </Component>
</main>

Trong trường hợp thành phần gốc không cung cấp nội dung cho các vị trí của thành phần con, nội dung mặc định hoặc dự phòng có thể được cung cấp trong các vị trí đó. Đây đóng vai trò là tài liệu được trưng bày khi cha mẹ ban đầu không cung cấp nội dung nào.

Để cung cấp nội dung thay thế trong trường hợp xảy ra lỗi, người ta có thể sử dụng thuộc tính “dự phòng” trong phần đánh dấu SVG như sau:

 <main>
  This is the child component
  <slot>Fallback Content</slot>
</main>

Đoạn mã được cung cấp đóng vai trò như một tùy chọn dự phòng, hiển thị cụm từ “Nội dung dự phòng” trong vị trí được chỉ định khi không có tài liệu thay thế nào được cung cấp bởi phần tử gốc.

Truyền dữ liệu qua khe với đạo cụ khe

Svelte cho phép truyền thông tin thông qua việc sử dụng “đạo cụ khe” nhằm mục đích cung cấp các chi tiết cụ thể trong một khu vực được chỉ định, thường được gọi là “khe”, nằm trong một thành phần khác. Quá trình này xảy ra khi tồn tại yêu cầu truyền tải thông tin cụ thể từ thành phần này sang thành phần khác trong quá trình triển khai thành phần sau.

Ví dụ:

 <script>
  let message = 'Hello Parent Component!'
</script>

<main>
  This is the child component
  <slot message={message}></slot>
</main>

Đoạn mã được cung cấp tạo thành một thành phần Svelte. Được đính kèm trong một thẻ, một biến có tên’thông báo’được khai báo và gán giá trị"Xin chào thành phần cha mẹ!". Hơn nữa, biến’message’được truyền dưới dạng đối số cho thuộc tính’slot’có cùng tên. Do đó, điều này cho phép thành phần gốc cung cấp nội dung cho vị trí’thông báo’được chỉ định này bằng cách cung cấp thông tin có liên quan theo ngữ cảnh để hiển thị thay cho chuỗi được mã hóa cứng “Xin chào Thành phần gốc!”.

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:message>
 <div>
 The child component says {message}
 </div>
 </Component>
</main>

Việc sử dụng cú pháp cho phép thành phần cha mẹ có quyền truy cập vào thuộc tính vị trí thông báo do thành phần con cung cấp, trong đó nội dung chứa trong phần tử được lấy trực tiếp từ vị trí nói trên.

Điều quan trọng cần lưu ý là việc sử dụng một khe chống đỡ duy nhất có thể không đủ trong một số trường hợp nhất định. Trong những trường hợp như vậy, có thể cần phải sử dụng nhiều đạo cụ vị trí để đáp ứng thông tin hoặc yêu cầu bổ sung.

 <script>
  let user = {
    firstName: 'John',
    lastName: 'Doe'
  };
</script>

<main>
  This is the child component
  <slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>

Trong thành phần cha mẹ:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:firstName let:lastName>
 <div>
 The user's name is {firstName} {lastName}
 </div>
 </Component>
</main>

Làm việc với các vị trí được đặt tên

Khi sử dụng các vị trí được đặt tên trong các thành phần của bạn, chúng cung cấp một phương tiện hiệu quả để chuyển nhiều vị trí trong khi cấp cho chúng các tên gọi riêng biệt. Cách tiếp cận này tạo điều kiện quản lý hiệu quả hơn nhiều khe cắm và cho phép tạo ra các thành phần phức tạp có cấu hình đa dạng.

người ta phải cung cấp nhãn hoặc tiêu đề của vị trí mong muốn để nội dung trong hộp đựng nhất định được chỉ định theo ý muốn.

 <div>
  This is the child component
  
  <p>Header: <slot name='header'></slot></p>
  <p>Footer: <slot name='footer'></slot></p>
</div>

Hãy xem xét trường hợp trong đó chúng ta có hai vùng chứa có thể nhận dạng được, đó là ký hiệu “tiêu đề” và ký hiệu “chân trang”. Bằng cách sử dụng thuộc tính “khe” linh hoạt, người ta có thể truyền dữ liệu đến một trong hai ngăn này từ thành phần cấu thành cấp cao hơn trong cấu trúc phân cấp.

Ví dụ:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span slot="header">This will be passed to the header slot</span>
 <span slot="footer">This will be passed to the footer slot</span>
 </Component>
</main>

Mã được cung cấp minh họa quá trình sử dụng thuộc tính “slot” và “prop” để truyền tải nội dung đến các vị trí được chỉ định. Trong phần tử “ ” ban đầu, vị trí “tiêu đề” được nhắm mục tiêu bằng cách gán thuộc tính “khe” có giá trị là “tiêu đề”. Do đó, văn bản kèm theo sẽ được hiển thị trong khe “tiêu đề” được chỉ định. Lặp lại cách tiếp cận này cho phần tử “ ” thứ hai, vị trí “chân trang” được truy cập thông qua việc gán giá trị của thuộc tính “khe” cho “chân trang”, từ đó hiển thị văn bản được chứa trong vị trí “chân trang” được chỉ định.

Tìm hiểu về chuyển tiếp vị trí

Chuyển tiếp vị trí, một khía cạnh của khung Svelte, cho phép truyền dữ liệu từ phần tử cha sang phần tử con thông qua thành phần trung gian hoặc thành phần bao bọc. Chức năng này tạo điều kiện thuận lợi cho việc truyền thông tin giữa các phần tử bị ngắt kết nối và mang lại sự linh hoạt trong việc quản lý các giao diện người dùng phức tạp.

Hãy xem xét quy trình triển khai chuyển tiếp vị trí trong hệ sinh thái động, trong đó các bước cần thiết liên quan đến việc tạo thành phần con như sau:

 <main>
  This is the child component
  <slot name="message"></slot>
</main>

Tiếp theo, bạn tạo thành phần trình bao bọc:

 <script>
    import Component from "./Component.svelte";
</script>

<main>
    <Component>
        <div slot='message'>
            <slot name="wrapperMessage"></slot>
        </div>
    </Component>
</main>

Trong đoạn mã này, một nhãn biến được xác định trước sẽ được đưa vào gói dữ liệu được truyền tải của cấu trúc giao diện phụ.

Trong thành phần chính, người ta có thể kết hợp đoạn mã nói trên để đạt được chức năng mong muốn là hiển thị thành phần accordion với nội dung có thể mở rộng dựa trên dữ liệu được cung cấp thông qua đạo cụ. Điều này cho phép người dùng tương tác năng động và tương tác với thành phần đàn accordion, nâng cao trải nghiệm tổng thể của người dùng.

 <script>
 import Wrapper from "./Wrapper.svelte";
</script>

<main>
 This is the parent component
 <Wrapper>
 <div slot="wrapperMessage">
 This is from the parent component
 </div>
 </Wrapper>
</main>

Kiến trúc nói trên tạo điều kiện thuận lợi cho việc truyền thông báo “Đây là từ thành phần cha mẹ”, đi qua thành phần trình bao bọc trên đường đến thành phần con nhận được, sử dụng khe bao bọcMessage được định vị trong phần tử trình bao bọc.

Làm cho cuộc sống của bạn dễ dàng hơn với các khe cắm mảnh dẻ

Khe cắm là một thuộc tính đặc biệt trong Svelte cho phép tạo ra các yếu tố có tính cá nhân hóa cao và có thể hoán đổi cho nhau. Trong khóa học này, bạn đã được giới thiệu cách tạo các vị trí cơ bản, các vị trí được xác định, sử dụng các thuộc tính của vị trí, v.v. Thông qua việc hiểu rõ các loại khe cắm đa dạng và cách triển khai chúng, người ta có thể xây dựng các thiết kế giao diện người dùng linh hoạt và thích ứng.