[TOC] # `v-slot`（插槽） 父页面在组件标签内插入任意内容，子组件内插糟 slot 控制摆放位置（匿名插槽、具名插槽） **插槽分类** 插槽一共就三大类 1. 匿名插槽 (也叫默认插槽): 没有命名，有且只有一个 2. 具名插槽：相对匿名插槽组件 slot 标签带 name 命名的 3. 作用域插槽：子组件内数据可以被父页面拿到 (解决了数据只能从父页面传递给子组件) # 具名插槽 子组件： ``` <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> // 匿名插槽 </main> <footer> <slot name="footer"></slot> </footer> </div> ``` 如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示。 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。 # 作用域插槽 下面代码中的`slotProps`（可以随意命名）可以读取子组件上所有的属性数据集合。 父页面： ``` <todo-list> <template v-slot:todo="slotProps" > // slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user" {{slotProps.user.firstName}} </template> </todo-list> ``` 子组件： ``` <slot name="todo" :user="user" :test="test"> {{ user.lastName }} // {{ user.lastName }}是默认数据 v-slot:todo 当父页面没有 (="slotProps") 时显示 Zhang </slot> data() { return { user:{ lastName:"Zhang", firstName:"yue" }, test:[1,2,3,4] } } ... ``` 可以看出页面最终渲染为： yue # 总结 用`v-slot`，需要考虑好： 1. 是否需要命名 (匿名插槽，具名插槽) 2. 父页面是否需要取存在子页面的数据 (作用域插槽) # 参考 > [详解 vue2.6 插槽更新 v-slot 用法总结](https://www.jb51.net/article/157565.htm) > [#插槽](https://vue3js.cn/docs/zh/guide/component-slots.html#插槽)