插槽分类
- 默认插槽（匿名插槽）（单个插槽）
- 具名插槽
- 作用域插槽
插槽的作用
让父组件能够向子组件指定地位插入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'] }}