理解:slot插槽好比是组件的变量,组件中用slot定义一个组件变量,然后在使用该组件时为变量赋值。
如:
- 在定义一个组件时,定义一个slot:child.vue
<template>
<div class="child">
<slot></slot> <!-- 1.定义slot插槽 -->
</div>
</template>
- 在另一个组件中使用child
<template>
<div class="main">
这是main的内容
<child> <!-- 2.使用组件,并给插槽赋值 -->
<span>这是slot的具体内容</span>
</child>
</div>
</template>
3.当组件被渲染时,<slot></slot>会被替换为<span>这是slot的具体内容</slot>,即
<div class="main">
这是main的内容
<div class="child">
<span>这是slot的具体内容</span>
</div>
</div>
可以理解为变量被赋值了
理解了slot的最基本含义和用法,再去看文档就简单多啦
vue官方文档