作用域插槽
一个 **作用域插槽** 提供组件中的本地数据，以便父组件可以选择如何渲染它。
将数据发送到父组件
我们在组件插槽中使用 v-bind 将本地数据发送到父组件
SlotComp.vue:
<template>
<slot v-bind:lclData="data"></slot>
</template>
<script>
export default {
data() {
return {
data: 'This is local data'
}
}
}
</script>
组件内部的数据可以称为“本地”数据，因为除非像这里使用 v-bind 一样将其发送到父组件，否则父组件无法访问它。
接收来自作用域插槽的数据
组件中的本地数据使用 v-bind 发送，并且可以使用 v-slot 在父组件中接收。
示例
App.vue:
<slot-comp v-slot:"dataFromSlot">
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
在上面的示例中，“dataFromSlot”只是一个我们自己可以选择的名称，用于表示我们从作用域插槽接收到的数据对象。我们通过使用“lclData”属性从插槽中获取文本字符串，并使用插值最终在 <h2> 标签中渲染文本。
带有数组的作用域插槽
作用域插槽可以使用 v-for 从数组发送数据，但 App.vue 中的代码基本上相同
示例
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>
带有对象数组的作用域插槽
作用域插槽可以使用 v-for 从对象数组发送数据
示例
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>
来自作用域插槽的静态数据
作用域插槽还可以发送静态数据，即不属于 Vue 实例 data 属性的数据。
发送静态数据时，我们不使用 v-bind。
在下面的示例中，我们发送一个静态文本和一个动态绑定到 data 实例的文本，以便我们可以看到区别。
示例
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>
命名作用域插槽
作用域插槽可以命名。
要使用命名作用域插槽，我们需要使用“name”属性在组件内部命名插槽。
要接收来自命名插槽的数据，我们需要在父组件中使用组件时使用 v-slot 指令或简写 # 来引用该名称。
示例
在这个示例中，组件被创建一次，引用了“leftSlot”插槽，一次引用了“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>
或者，我们可以创建一次组件，使用两个不同的 "template" 标签，每个 "template" 标签都引用不同的插槽。
示例
在这个示例中，组件只创建了一次，但使用两个 "template" 标签，每个标签都引用不同的插槽。
SlotComp.vue 与上一个示例中的完全相同。
App.vue:
<slot-comp>
<template #leftSlot="leftProps">
<div>{{ leftProps.text }}</div>
</template>
<template #rightSlot="rightProps">
<div>{{ rightProps.text }}</div>
</template>
</slot-comp>
