vue 插槽slot

              这里是父组件
<template>
    <div>
        <child>   子组件自定义的插槽标签
            <div>
              <span>菜单1</span>
              <span>菜单2</span>
              <span>菜单3</span>
              <span>菜单4</span>
              <span>菜单5</span>
              <span>菜单6</span>
            </div>
        </child>
    </div>


这里是子组件
<template>
    <div class="child">  插槽标签
        <slot></slot>   引用插槽
    </div>
</template>


这是子组件    运行结果
<template>
<div class="child">
  <span>菜单1</span>
  <span>菜单2</span>
  <span>菜单3</span>
  <span>菜单4</span>
  <span>菜单5</span>
  <span>菜单6</span>
</template>


匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。下

<Child>
<span slot="header">hello world</span>
<span slot="main">hello world</span>
<span slot="footer">hello world</span>
<span slot="other">hello world</span>
</Child>


<template>
<div class="Child">
 // 具名插槽
<slot  name=”header”>这是拥有命名的slot的默认内容</slot>
 // 具名插槽
<slot  name=”main”>这是拥有命名的slot的默认内容</slot>
 // 具名插槽
<slot  name=”footer”>这是拥有命名的slot的默认内容</slot>
// 匿名插槽
<slot></slot>
</div>
</template>