Vị trí có phạm vi
Vị trí có phạm vi cung cấp dữ liệu cục bộ từ thành phần để thành phần gốc có thể chọn cách hiển thị dữ liệu đó.
Gửi dữ liệu cho phụ huynh
Chúng tôi sử dụng v-bind trong vùng thành phần để gửi dữ liệu cục bộ đến cha mẹ:
SlotComp.vue :
<template>
<slot v-bind:lclData="data"></slot>
</template>
<script>
export default {
data() {
return {
data: 'This is local data'
}
}
}
</script>
Dữ liệu bên trong thành phần có thể được gọi là 'cục bộ' vì dữ liệu gốc không thể truy cập được trừ khi nó được gửi lên cấp độ gốc như chúng ta làm ở đây với v-bind .
Nhận dữ liệu từ vị trí có phạm vi
Dữ liệu cục bộ trong thành phần được gửi bằng v-bind và nó có thể được nhận ở phần gốc bằng v-slot :
Ví dụ
App.vue :
<slot-comp v-slot:"dataFromSlot" >
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
Chạy ví dụ » Trong ví dụ trên, 'dataFromSlot' chỉ là tên mà chúng ta có thể tự chọn để thể hiện đối tượng dữ liệu mà chúng ta nhận được từ vùng có phạm vi. Chúng tôi lấy chuỗi văn bản từ vị trí bằng cách sử dụng thuộc tính 'lclData' và chúng tôi sử dụng phép nội suy để cuối cùng hiển thị văn bản trong thẻ <h2> .
Khe có phạm vi với một mảng
Một vị trí có phạm vi có thể gửi dữ liệu từ một mảng bằng cách sử dụng v-for , nhưng mã trong App.vue về cơ bản giống nhau:
Ví dụ
SlotComp.vue :
<template>
<slot
v-for="x in foods"
:key="x"
:foodName="x"
></slot>
</template>
<script>
export default {
data() {
return {
foods: ['Apple','Pizza','Rice','Fish','Cake']
}
}
}
</script>
App.vue :
<slot-comp v-slot="food" >
<h2>{{ food.foodName }}</h2>
</slot-comp>
Chạy ví dụ »Khe có phạm vi với một mảng đối tượng
Một vị trí có phạm vi có thể gửi dữ liệu từ một mảng đối tượng bằng cách sử dụng v-for :
Ví dụ
SlotComp.vue :
<template>
<slot
v-for="x in foods"
:key="x.name"
:foodName="x.name"
:foodDesc="x.desc"
:foodUrl="x.url"
></slot>
</template>
<script>
export default {
data() {
return {
foods: [
{ name: 'Apple', desc: 'Apples are a type of fruit that grow on trees.', url: 'img_apple.svg' },
{ name: 'Pizza', desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.', url: 'img_pizza.svg' },
{ name: 'Rice', desc: 'Rice is a type of grain that people like to eat.', url: 'img_rice.svg' },
{ name: 'Fish', desc: 'Fish is an animal that lives in water.', url: 'img_fish.svg' },
{ name: 'Cake', desc: 'Cake is something sweet that tastes good but is not considered healthy.', url: 'img_cake.svg' }
]
}
}
}
</script>
App.vue :
<slot-comp v-slot="food">
<hr>
<h2>{{ food.foodName }}<img :src= food.foodUrl ></h2>
<p>{{ food.foodDesc }}</p>
</slot-comp>
Chạy ví dụ »Dữ liệu tĩnh từ một vị trí có phạm vi
Một vị trí có phạm vi cũng có thể gửi dữ liệu tĩnh, đó là dữ liệu không thuộc thuộc tính dữ liệu của phiên bản Vue.
Khi gửi dữ liệu tĩnh chúng ta không sử dụng v-bind .
Trong ví dụ bên dưới, chúng tôi gửi một văn bản tĩnh và một văn bản được liên kết động với phiên bản dữ liệu để chúng tôi có thể thấy sự khác biệt.
Ví dụ
SlotComp.vue :
<template>
<slot
staticText="This text is static"
:dynamicText="text"
></slot>
</template>
<script>
export default {
data() {
return {
text: 'This text is from the data property'
}
}
}
</script>
App.vue :
<slot-comp v-slot="texts">
<h2>{{ texts.staticText }}</h2>
<p>{{ texts.dynamicText }}</p>
</slot-comp>
Chạy ví dụ »Các vị trí có phạm vi được đặt tên
Các khe có phạm vi có thể được đặt tên.
Để sử dụng các vị trí có phạm vi được đặt tên, chúng ta cần đặt tên cho các vị trí bên trong thành phần bằng thuộc tính 'name'.
Và để nhận dữ liệu từ một vị trí được đặt tên, chúng ta cần tham chiếu đến tên đó trong phần tử mẹ nơi chúng ta sử dụng thành phần đó, bằng chỉ thị v-slot hoặc viết tắt # .
Ví dụ
Trong ví dụ này, thành phần được tạo một lần đề cập đến vị trí "leftSlot" và một lần đề cập đến vị trí "rightSlot".
SlotComp.vue :
<template>
<slot
name="leftSlot"
:text="leftText"
></slot>
<slot
name="rightSlot"
:text="rightText"
></slot>
</template>
<script>
export default {
data() {
return {
leftText: 'This text belongs to the LEFT slot.',
rightText: 'This text belongs to the RIGHT slot.'
}
}
}
</script>
App.vue :
<slot-comp #leftSlot="leftProps">
<div>{{ leftProps.text }}</div>
</slot-comp>
<slot-comp #rightSlot="rightProps">
<div>{{ rightProps.text }}</div>
</slot-comp>
Chạy ví dụ » Ngoài ra, chúng ta có thể tạo thành phần một lần, với hai thẻ "template" khác nhau, mỗi thẻ "template" đề cập đến một vị trí khác nhau.
Ví dụ
Trong ví dụ này, thành phần chỉ được tạo một lần nhưng với hai thẻ "template" , mỗi thẻ đề cập đến một vị trí khác nhau.
SlotComp.vue hoàn toàn giống với ví dụ trước.
App.vue :
<slot-comp>
<template #leftSlot="leftProps">
<div>{{ leftProps.text }}</div>
</template>
<template #rightSlot="rightProps">
<div>{{ rightProps.text }}</div>
</template>
</slot-comp>
Chạy ví dụ »