本文实例讲述了vue插槽slot的简单理解与用法。分享给大家供大家参考，具体如下：
vue中插槽的使用非常广泛，本文就插槽的使用和理解简单总结。
从字面理解插槽是预先插入一个代码空间，用于后期塞入数据。
插槽分类
匿名插槽 —————— 匿名的代码空间
具名插槽 —————— 带有命名的代码空间
作用域插槽 ——————- 带有数据的代码空间
插槽使用示例
匿名插槽
说明在组件中先定义预留的代码空间，组件在使用时直接写入代码
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>使用：
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
</child>
</div>
</template>具名插槽
预先在组件中定义一个带有名称的代码空间，使用组件时用：slot绑定名称
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>这里是子组件</h3>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>使用：
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
//插槽up
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
//插槽down
<div class="tmpl" slot="down">
<span>菜单-1</span>
<span>菜单-2</span>
<span>菜单-3</span>
<span>菜单-4</span>
<span>菜单-5</span>
<span>菜单-6</span>
