Vue v-slot Chỉ thị
Ví dụ
Sử dụng chỉ thị v-slot
để chuyển hướng 'Xin chào!' thông báo tới vị trí được đặt tên 'bottomSlot', bên trong thành phần <slot-comp>.
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
Chạy Ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Lệnh v-slot
được sử dụng để hướng nội dung đến một vị trí được đặt tên.
Viết tắt của v-slot:
là #
.
Lệnh v-slot
cũng có thể được sử dụng để nhận dữ liệu từ các vị trí có phạm vi, được cung cấp bằng cách sử dụng v-bind
trong thành phần con.
v-slot
có thể được sử dụng trên các thành phần hoặc trên phần tử <template>
tích hợp.
v-slot
được sử dụng trên các phần tử <template>
khi chúng ta muốn gán nội dung cho nhiều vị trí trong một thành phần.
Thêm ví dụ
ví dụ 1
Sử dụng v-slot
trên các phần tử <template>
để gán nội dung cho hai vị trí khác nhau trong cùng một thành phần.
App.vue
:
<template>
<h1>App.vue</h1>
<p>The component has two slots, and the template element is used to assign content to both.</p>
<slot-comp>
<template v-slot:topSlot>
<div>
<p>Tigers are beautiful!</p>
<img src="tiger.svg" alt="tiger" width="100">
</div>
</template>
<template v-slot:bottomSlot>
<div>
<p>Whales can be very big</p>
</div>
</template>
</slot-comp>
</template>
SlotComp.vue
:
<template>
<hr>
<h3>Component</h3>
<slot name="topSlot"></slot>
<slot name="bottomSlot"></slot>
</template>
Chạy Ví dụ »Ví dụ 2
Sử dụng v-slot
để hướng nội dung đến vị trí mặc định.
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ụ »Ví dụ 3
Sử dụng v-slot:
viết tắt #
.
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ụ »Ví dụ 4
Sử dụng v-slot
để nhận dữ liệu từ một slot có phạm vi.
App.vue
:
<slot-comp v-slot:"dataFromSlot" >
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
Chạy Ví dụ »Trang liên quan
Hướng dẫn Vue: Vue Slots
Hướng dẫn về Vue: Slots có phạm vi
Hướng dẫn về Vue: Thành phần Vue
Hướng dẫn Vue: Vue v-slot
Tham khảo Vue: Phần tử Vue <slot>
Tham khảo Vue: Đối tượng Vue $slots