Cách sử dụng lại các thành phần Vue với Slots
Vue cung cấp nhiều cách khác nhau để các thành phần có thể giao tiếp với nhau. Giao tiếp này có thể giữa hai thành phần không liên quan hoặc giữa thành phần cha và con. Vue đạt được điều này với các tính năng bao gồm đạo cụ, cung cấp/tiêm và vị trí.
Tìm hiểu cách sử dụng các vị trí để cho phép các thành phần cha và con giao tiếp trong các ứng dụng Vue của bạn.
Mục Lục
Slots là gì?
Các vị trí trong Vue đóng vai trò là trình giữ chỗ trong mẫu của thành phần con. Các trình giữ chỗ này cho phép bạn chuyển nội dung từ các thành phần cha sang con một cách linh hoạt.
Tương tự như các đạo cụ truyền dữ liệu và chức năng từ các thành phần cha sang con, các vị trí cho phép bạn truyền nội dung mẫu từ các thành phần cha sang con. Điều này cho phép bạn tạo nhiều thành phần có thể tái sử dụng hơn với nội dung HTML khác nhau.
Cú pháp cơ bản của Slots
Vue nổi tiếng với khả năng nâng cao HTML bằng các thẻ tùy chỉnh cho phép bạn nhanh chóng xây dựng các ứng dụng web linh hoạt. Slots cũng không ngoại lệ. Trong Vue, một thẻ vị trí duy nhất cho phép bạn đặt trình giữ chỗ trong các thành phần con để đưa nội dung HTML vào.
Để xác định một vị trí trong thành phần con Vue, hãy sử dụng phần tử trong mẫu của thành phần đó. Hãy xem xét ví dụ cơ bản này:
<template>
<div>
<slot></slot>
</div>
</template>
Ví dụ này giới thiệu một thành phần Vue đơn giản có chứa một chỗ. Bạn có thể chuyển nội dung vào vị trí trong thành phần con này từ thành phần cha. Nội dung này sẽ thay thế phần tử vị trí khi Vue hiển thị thành phần con.
Để sử dụng vị trí, hãy chuyển nội dung cho thành phần con từ thành phần cha:
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script><template>
<ChildComponent>
<h1>This is the child component</h1>
</ChildComponent>
<div>
<h3>This is the parent component</h3>
</div>
</template>
Khối mã trên đại diện cho một thành phần cha mẹ nhập và sử dụng thành phần con từ trước đó. Thành phần con nhận thông điệp “Đây là thành phần con” TRONG h1 thẻ và thay thế trình giữ chỗ bằng thông báo này.
Các vị trí cho phép bạn xác định cấu trúc bố cục và soạn thảo các thành phần phức tạp bằng cách tạo rãnh trong các khối nội dung khác nhau. Điều này đặc biệt có lợi khi bạn đang tạo các thành phần giao diện người dùng có thể tái sử dụng hoặc xây dựng bố cục với các phần có thể hoán đổi cho nhau.
Đặt tên cho các vị trí của bạn để sử dụng nhiều hơn một
Khi bạn đang làm việc với các thành phần khác nhau, bạn có thể cần xác định nhiều hơn một vị trí trong một phần tử con. Điều này có thể là do thành phần con của bạn có thể có các phần khác nhau như đầu trang và chân trang hoặc tiêu đề và nội dung thẻ.
Vue cho phép bạn xác định các vị trí có tên để tham chiếu một vị trí cụ thể khi truyền nội dung từ thành phần chính.
Ví dụ:
<template>
<div class="card">
<div class="card-title">
<slot name="title"></slot>
</div> <div class="card-body">
<slot name="body"></slot>
</div>
</div>
</template>
<style>
.card {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
}
.card-title {
font-weight: bold;
margin-bottom: 10px;
}
.card-body {
margin-bottom: 10px;
}
</style>
Khối mã trên mô tả một thành phần con đại diện cho một thẻ. Thành phần thẻ này xác định hai khe cắm với hai tên thuộc tính: tiêu đề Và thân hình. Bạn có thể tham chiếu một trong hai vị trí này và chuyển nội dung cho từng vị trí đó.
Để chuyển nội dung vào các vị trí được đặt tên, hãy sử dụng v-khe cắm chỉ thị trong thành phần cha mẹ:
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script><template>
<div>
<ChildComponent>
<template v-slot:title>
<h2>This is the Card Title</h2>
</template>
<template v-slot:body>
<p>This is the Card Body Content.</p>
<p>It can include multiple paragraphs or any other HTML content.</p>
</template>
</ChildComponent>
</div>
</template>
Thành phần chính này sử dụng thành phần con và chuyển nội dung cho tiêu đề và nội dung của thẻ. Vue đưa nội dung trong các khối mẫu vào các vị trí tương ứng trong thành phần con.
Cũng như các chỉ thị khác trong Vue, như v-cho lệnh hiển thị danh sách, bạn cần đính kèm v-khe cắm chỉ thị cho một thẻ HTML. Bạn thường nên gắn nó vào một bản mẫu nhãn.
Giống như các chỉ thị Vue khác, v-slot có một cách viết tắt: ký hiệu #.
<template #title>
<h2>This is the Card Title</h2>
</template>
Nội dung mặc định cho Slots
Bạn có thể xác định các vị trí có nội dung mặc định sẽ hiển thị khi bạn không chuyển bất kỳ vị trí nào xuống từ thành phần chính. Bạn có thể đạt được điều này bằng cách đơn giản là đặt nội dung trong chỗ yếu tố.
Ví dụ:
<template>
<div>
<slot>
<p>Default content for the slot.</p>
</slot>
</div>
</template>
Trong ví dụ này, nếu thành phần cha không cung cấp bất kỳ nội dung nào cho vị trí, Vue sẽ đặt nội dung HTML thành nội dung trong thành phần con.
Cách sử dụng các vị trí có phạm vi
Vị trí có phạm vi cho phép bạn sử dụng dữ liệu từ thành phần con khi đưa nội dung HTML từ thành phần cha. Điều này rất hữu ích khi bạn cần kết xuất dữ liệu mà bạn đã xác định trong thành phần con.
Đây là một ví dụ về cách bạn có thể sử dụng các vị trí có phạm vi:
<script setup>
import { ref } from "vue";const value = ref("David");
const age = ref(21);
</script>
<template>
<div>
<slot :value="value" :age="age"> </slot>
</div>
</template>
Thành phần con này định nghĩa hai biến: a giá trịđại diện cho một cái tên, và một tuổi, đại diện cho một số. Sau đó, ví dụ xác định một vị trí và chuyển hai biến này, tương tự như cách bạn sử dụng các đạo cụ khi tạo các thành phần Vue.
Giờ đây, bạn có thể truy cập các biến này từ thành phần cha bằng cách đính kèm chỉ thị v-slot vào thẻ của thành phần con:
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script><template>
<div>
<ChildComponent v-slot="slotProps">
{{ slotProps.value }} is {{ slotProps.age }} years old.
</ChildComponent>
</div>
</template>
Các v-khe cắm chỉ thị kèm theo Thành phần con thẻ cho phép thành phần cha này nhận dữ liệu từ thành phần con và sử dụng nó trong nội dung vị trí. Các slotProps đối tượng đại diện cho dữ liệu được chia sẻ.
Trong nội dung khe, {{ slotProps.value }} Và {{ slotProps.age }} hiển thị dữ liệu được chia sẻ với phép nội suy, một kỹ thuật để liên kết dữ liệu trong Vue.
Khi làm việc với các vị trí được đặt tên, hãy đính kèm v-khe cắm chỉ thị cho một bản mẫu nhãn. Ví dụ:
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script><template>
<div>
<ChildComponent>
<template #title="titleProps">
<h2>{{ titleProps.title }}</h2>
</template>
<template #body="bodyProps">
<p>{{ bodyProps.body }}</p>
</template>
</ChildComponent>
</div>
</template>
Khối mã trên mô tả việc sử dụng thành phần con của thành phần cha. Thành phần cha mẹ đính kèm v-khe cắm chỉ thị cho hai bản mẫu thẻ, sử dụng tốc ký để đặt tên. Các v-khe cắm chỉ thị cho phép thành phần cha mẹ sử dụng dữ liệu từ thành phần con khi hiển thị nội dung HTML.
Bây giờ, hãy xem xét thành phần con mà thành phần cha mẹ sử dụng trong khối mã bên dưới:
<script setup>
import { ref } from "vue";
const cardTitle = ref("This is the card title.");
const cardBody = ref("This is the card body content.");
</script><template>
<div class="card">
<div class="card-title">
<slot name="title" :title="cardTitle"></slot>
</div>
<div class="card-body">
<slot name="body" :body="cardBody"></slot>
</div>
</div>
</template>
Thành phần con này sử dụng các vị trí được đặt tên để phân biệt chúng. Vue bảo lưu thuộc tính tên làm mã định danh duy nhất cho thẻ vị trí. Thành phần con chuyển thuộc tính title và body cho thành phần cha.
Slots không phải là tính năng thành phần Vue duy nhất
Slots là một tính năng mạnh mẽ trong Vue cho phép bạn tạo các thành phần có thể tái sử dụng với nội dung có thể tùy chỉnh. Bằng cách hiểu cú pháp và cách sử dụng các vị trí, bạn có thể xây dựng các ứng dụng Vue.js linh hoạt và theo mô-đun hơn.
Vue cung cấp các tính năng thành phần khác, chẳng hạn như các bộ tổng hợp và đạo cụ để giao tiếp thành phần. Là nhà phát triển Vue, cần có kiến thức nâng cao về các tính năng này.