关于vue.js: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> 这里是父组件 </h3>
    <child>
      // 这里能够应用 v -slot。vue2.6 当前提出的，然而，必须写在 template 下面，否则报错，v-slot 能够简写成#
      // <template v-slot:a>
      // <template #a>
      <div class="tmpl" slot="a">
        <span> 菜单 1 </span>
        <span> 菜单 2 </span>
        <span> 菜单 3 </span>
      </div>
      <div class="tmpl" slot="b">
        <span> 菜单 -1</span>
        <span> 菜单 -2</span>
        <span> 菜单 -3</span>
      </div>
      <div class="tmpl">
        <span> 菜单 ->1</span>
        <span> 菜单 ->2</span>
        <span> 菜单 ->3</span>
      </div>
    </child>
  </div>
</template>

// 子组件
<template>
  <div class="child">
    // 具名插槽
    <slot name="a"></slot>
    <h3> 这里是子组件 </h3>
    // 具名插槽
    <slot name="b"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

3. 作用域插槽

这个插槽，可能有点难了解，然而还是有应用场景的，就是数据不在父组件，而是在子组件中的时候

// 父组件
<template>
  <div class="father">
    <h3> 这里是父组件 </h3>
    <child>
      // <template scope="childData">
      // 下面是以前的写法，上面是新的写法，都能够
      // 这里必须是 template
      <template slot-scope="childData">
        <span v-for="(item,index) in childData.lists" :key="index">{{item}}</span>
      </template>
    </child>
  </div>
</template>

// 子组件
<template>
  <div class="child">
    <slot :lists="list"></slot>
  </div>
</template>

data() {
    return {list: ['菜单 1','菜单 2','菜单 3']
    }
}