插槽分类
- 默认插槽(匿名插槽)(单个插槽)
- 具名插槽
- 作用域插槽
插槽的作用
让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式。插槽显示不显示,怎么显示,是父组件及控制。显示在什么位置,是子组件控制。
使用方式
1.默认插槽
// 父组件
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
</div>
</child>
</div>
</template>
// 子组件
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
2.具名插槽
// 父组件
<template>
<div class="father">
<h3>这里是父组