如果一个组件中有多个 v-slot 将内容发送到正确的位置。
为了能够区分插槽，我们为插槽指定了不同的名称。
SlotComp.vue:
组件
name="topSlot">
name="bottomSlot">
现在我们可以在 App.vue 中使用 v-slot 将内容定向到右侧插槽。
App.vue:
App.vue
该组件有两个 div 标签，每个标签中有一个插槽。
v-slot:bottomSlot>'Hello!'
如果您的 v-slot:default 的组件或未标有 v-slot 的组件的默认值。
要了解其工作原理，我们只需在前面的示例中进行两个小更改:
SlotComp.vue:
组件
name="topSlot">
App.vue:
App.vue
该组件有两个 div 标签，每个标签中有一个插槽。
v-slot:bottomSlot>'Hello!'
正如已经提到的，我们可以使用默认值 v-slot:default 标签内容，以更加清楚地表明该内容属于默认槽。
SlotComp.vue:
组件
App.vue:
App.vue
该组件有两个 div 标签，每个标签中有一个插槽。
v-slot:default>'Default slot'
正如您所见，v-slot 指令可以用作组件标签中的属性。
v-slot 也可以用在 标签中，将大部分内容定向到某个
App.vue:
App.vue
该组件有两个 div 标签，每个标签中有一个插槽。
到底部插槽！
这个 p 标签和上面的 h4 标签通过模板标签上使用的 v-slot 指令定向到底部插槽。
这会进入默认插槽
SlotComp.vue:
组件
我们使用 标签将一些内容定向到某个 标签没有渲染，它只是内容的占位符。 您可以通过检查构建的页面来看到这一点:您不会在那里找到模板标签。
v-slot: 的简写是 #。
这意味着:
v-slot:topSlot>'Hello!'
可以写成:
#topSlot>'Hello!'
App.vue:
App.vue
该组件有两个 div 标签，每个标签中有一个插槽。
#topSlot>'Hello!'
SlotComp.vue:
组件
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
