vue slot具名插槽

具名插槽：即具有名字的插槽，在默认插槽基础上指定插槽的名字（name = " "）。
父组件指明放入子组件的哪个插槽 slot = "footer"，如果是template可以写成 v-slot : footer。

父组件：

语法：<子组件><template v-slot:插槽名>HTML结构 </template></子组件>

<template>
  <div>
    <!-- 具名插槽 -->
    <cell>
      <!-- `<template>`是HTML5新增的一个语义化标签，模板的意思。
             这个标签本身不会被渲染，因此最终在页面是看不见的。  
            这个标签类似于div,就是一个空盒子容器。 
            与div唯一的区别就是它不会渲染。 -->
      <template v-slot:a>
        <button>我是第一个具名插槽 a</button><br />
      </template>
      <template #b>
        <!--v-slot 可以简写为 # -->
        <button>我是第二个具名插槽 b</button><br />
      </template>
      <template v-slot:c>
        <button>我是第三个具名插槽 c</button>
      </template>
    </cell>
  </div>
</template>

<script>
import cell from "@/components/cell.vue";
export default {
    components:{
        cell
    }
}
</script>

<style>

</style>

子组件：

语法：<slot name="插槽名"> 默认插槽结构 </slot>

<template>
  <div>
    <!-- <slot> 是 vue 内置组件 生成占位盒子 -->
    <slot name="a"><h1>我是第一个插槽</h1></slot>
    <slot name="b"><h2>我是第二个插槽</h2></slot>
    <slot name="c"><h3>我是第三个插槽</h3></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

效果图：