千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

p53-具名插槽 心得

1.概念

1.1插槽

• 让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式。
• 适用于： 父组件到子组件

1.2具名插槽

• 父组件中：定义 html 结构，并给不同的插槽 name 命名，这样可以对应的使用多个插槽。
• 子组件中：使用 <slot> 标签，标签内容为默认内容（即不传入具体结构时显示）。里面的 name 对应父组件中的定义的值。

2.步骤

2.1 普通插槽的父组件模板和子组件模板

2.2 先在子组件的slot插槽标签上写name属性，给插槽取名

通过<slot name="xxx"><slot>的方式来定义一个具名插槽

2.3在父组件模板中绑定name属性值

通过<template v-slot:xxx></template>的方式来使用具名插槽

效果如下

2.4 默认插槽和具名插槽的混用

v-slot也可以简写为#

2.5 未来具名插槽的用法

未来在使用具名插槽时，可以在组件库时自定义导航栏两侧的内容

• 使用插槽，呈现父组件中的内容
• 每一个插槽都有特定的名字

2.6 仿照导航栏的展示

中间的template没有起名，传入对应的默认插槽

最后呈现导航栏的效果