Vue组件-slot

插槽分类

• 默认插槽（匿名插槽）（单个插槽）
• 具名插槽
• 作用域插槽

插槽的作用

让父组件可以向子组件指定位置插入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>这里是父组