slot插槽学习总结

什么是插槽

• 服务于组件的封装者
• 是组件中不确定的、由用户指定的那部分
• <slot>：插槽出口，标示父组件提供的插槽内容在哪里被渲染
• 插槽内容：可以是任意合法的模板内容，不局限于文本，可以是多个元素
• 插槽数据作用域：插槽可以访问父组件数据作用域，访问不了子组件数据（可以通过作用域插槽访问子组件的部分数据）
• 动态插槽名： <template v-slot:[dynamicSlotName]>

插槽分类

1. 匿名插槽
2. 具名插槽
3. 作用域插槽

后备（默认）内容

<slot>default content</slot>

• 在父组件没有提供内容的时候渲染
• 当父组件提供了内容则渲染父组件提供的内容

匿名插槽（默认插槽）

<slot></slot>

• 没有配置name属性的插槽
• 会隐式命名为"default"

具名插槽

<slot name="header"></slot>

• 配置了name属性的插槽
• 作用：可以在一个组件中配置多个插槽出口
• 放置在配置了slot属性的内容会被传入相应名字的插槽
• 没有放置在配置了slot属性的内容都会被视为默认插槽的内容

提供内容时：

• 可以在<template>上使用slot，<template v-slot:header>或<template slot=“header”>
• v-slot可以简写为#，<template #header>
• 也可以直接放在标签中，<div slot=“header”>

作用域插槽

<slot :obj="obj" :attr="attr"></slot>

• 绑定在插槽元素上的属性是插槽prop
• 作用域插槽使父组件的插槽内容可以访问子组件中的props数据

提供内容（接收props）时：

1. 匿名作用域插槽：

<MyComponent v-slot="slotProps">{{ slotProps.text }}</MyComponent>
// 解构写法
<MyComponent v-slot="{ text, count }">{{ text }} {{ count }}</MyComponent>）

2. 具名作用域插槽：

<template #header="headerProps">{{ headerProps }}</template>
<template slot="header" slot-scope="data">{{data.obj.lastName}}</template>

• 这里的data(也可以使用其他名字)指代插槽的所有prop，通过data可以拿到子组件的obj
• 同时使用了默认插槽和具名插槽，需要为默认插槽使用<template #default>，这是为了避免默认插槽的props作用域不清晰

注意！！！

1. 不使用插槽直接在子组件中插入的内容不生效
2. 插槽内可以包含任何模板代码，包括HTML，其他组件等
3. 插槽可以访问父组件数据作用域，访问不了子组件数据
4. 可以通过作用域插槽访问子组件数据
5. 同时使用了默认插槽和具名插槽，需要为默认插槽使用<template #default>，这是为了避免默认插槽的props作用域不清晰

总结

• 插槽的作用：使模板分块，具有模块化的特质和更大的重用性
• 父组件：可以控制插槽是否显示以及如何显示
• 子组件：可以控制插槽在哪里显示
• 插槽分类：默认插槽/具名插槽/作用域插槽
• VUE模板中的表达式只能访问其定义时所处的作用域，父组件插槽内容可以通过作用域插槽去访问子组件的部分数据
• 当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非节点都被隐式地视为默认插槽的内容
• 无渲染组件：只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了父组件