作用

image.png
image.png

基本使用

1、子组件使用
image.png
image.png

2、使用时，只要父组件内，在子组件标签中加内容，会自动替换组件的插槽
image.png
image.png image.png
image.png image.png

=======================

插槽默认内容

子组件
image.png

父组件
image.png
image.png

多个插槽

多个插槽，会全部都渲染所有父组件插入的内容
image.png

具名插槽

为避免多插槽那样，我们可以给插槽起名字，然后使用组件时替换指定名字的插槽。

Vue 2.x

子组件
和Vue 3.x 一样用法

父组件

  1. <template>
  2.   <div>
  3.     <Title1>
  4.       <div slot="bbb">444</div>
  5.     </Title1>
  6.   </div>
  7. </template>

Vue 3.x

image.png

默认具名插槽default

不指定名字，实际上也是有名字，默认为name = “default”

子组件
image.png
相当于
image.png

动态插槽名（重要）

image.png
用于项目封装组件，如很多UI库的table表格组件

具名插槽缩写

image.png

======================

作用域

编译作用域

image.png
简单的说，就是组件有组件自己的作用域，默认是查找自己组件内的data数据，无法直接往父级、子级查找data数据。
image.png

作用域插槽（常用）

image.png
需求：父组件可以直接使用子组件里面的数据，而不需要子组件$emit

这个会很常接触到，特别是一些常见的UI库组件，如element-UI、avue、Ant design Vue等，都是

image.png

独占默认插槽的缩写

image.png

独占：子组件只有1个默认（name为default）的插槽，没有其他插槽
image.png
如果上面去掉注释，父组件就不能简写了，必须加template，如下：
image.png