Vue v-khe
Chúng ta cần chỉ thị v-slot để tham chiếu đến các slot được đặt tên .
Các vị trí được đặt tên cho phép kiểm soát nhiều hơn vị trí đặt nội dung trong mẫu của thành phần con.
Các vị trí được đặt tên có thể được sử dụng để tạo các thành phần linh hoạt hơn và có thể tái sử dụng.
Trước khi sử dụng v-slot và các slot được đặt tên, hãy xem điều gì sẽ xảy ra nếu chúng ta sử dụng hai slot trong thành phần:
Ví dụ
App.vue :
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>
SlotComp.vue :
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot></slot>
</div>
Chạy ví dụ »Với hai vị trí trong một thành phần, chúng ta có thể thấy rằng nội dung chỉ xuất hiện ở cả hai vị trí.
v-slot và Slots được đặt tên
Nếu chúng ta có nhiều hơn một <slot> trong một thành phần, nhưng chúng ta muốn kiểm soát nội dung sẽ xuất hiện ở <slot> nào, chúng ta cần đặt tên cho các vị trí đó và sử dụng v-slot để gửi nội dung đến đúng nơi.
Ví dụ
Để có thể phân biệt các slot chúng ta đặt cho các slot những tên khác nhau.
SlotComp.vue :
<h3>Component</h3>
<div>
<slot name="topSlot" ></slot>
</div>
<div>
<slot name="bottomSlot" ></slot>
</div>
Và bây giờ chúng ta có thể sử dụng v-slot trong App.vue để hướng nội dung đến đúng vị trí.
App.vue :
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot >'Hello!'</slot-comp>
Chạy ví dụ »Khe mặc định
Nếu bạn có <slot> không có tên, <slot> đó sẽ được mặc định cho các thành phần được đánh dấu bằng v-slot:default hoặc các thành phần không được đánh dấu bằng v-slot .
Để xem cách thức hoạt động của tính năng này, chúng ta chỉ cần thực hiện hai thay đổi nhỏ trong ví dụ trước:
Ví dụ
SlotComp.vue :
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
App.vue :
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
Chạy ví dụ » Như đã đề cập, chúng ta có thể đánh dấu nội dung bằng giá trị mặc định v-slot:default để làm rõ hơn rằng nội dung đó thuộc về vị trí mặc định.
Ví dụ
SlotComp.vue :
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
App.vue :
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:default >'Default slot'</slot-comp>
Chạy ví dụ »khe chữ v trong <template>
Như bạn đã thấy lệnh v-slot có thể được sử dụng làm thuộc tính trong thẻ thành phần.
v-slot cũng có thể được sử dụng trong thẻ <template> để hướng các phần nội dung lớn hơn đến một <slot> nhất định.
Ví dụ
App.vue :
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
SlotComp.vue :
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
Chạy ví dụ » Chúng tôi sử dụng thẻ <template> để hướng một số nội dung đến một <slot> nhất định vì thẻ <template> không được hiển thị, nó chỉ là phần giữ chỗ cho nội dung. Bạn có thể thấy điều này bằng cách kiểm tra trang đã xây dựng: bạn sẽ không tìm thấy thẻ mẫu ở đó.
v-slot Viết tắt #
Viết tắt của v-slot: là # .
Điều này có nghĩa rằng:
<slot-comp v-slot:topSlot >'Hello!'</slot-comp>
Có thể được viết như:
<slot-comp #topSlot >'Hello!'</slot-comp>
Ví dụ
App.vue :
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp #topSlot >'Hello!'</slot-comp>
SlotComp.vue :
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
Chạy ví dụ »