vue@2.6.0 开始,官方推荐我们使用 v-slot 来替代slot 和 scope-slot
一,匿名插槽(默认插槽)
当组件内插槽有且只有一个,可使用默认插槽
父组件
<!-- 默认插槽 省略v-slot:default-->
<child>
<template>
<h1>默认插槽</h1>
</template>
</child>
子组件
<div class="child">
<slot></slot>
</div>
二,具名插槽
slot定义name属性,在父组件中跟在v-slot:之后
父组件
<!-- 具名插槽 -->
<child1>
<template v-slot:c1>
<h1>具名插槽c1</h1>
</template>
</child1>
子组件
<div class="child1">
<slot name='c1'></slot>
</div>
三,作用域插槽
使父组件的template内部可以使用子组件内的data
父组件
<!-- 作用域插槽 -->
<child2>
<!-- 这里用mmm接收子组件的slot传过来的数据 -->
<template v-slot:c2='mmm'>
<h1>作用域插槽c2</h1>
{{mmm}}
</template>
</child2>
为了使代码简洁,可以进行解构赋值(亦可重命名解构变量)
<!-- 作用域插槽---解构赋值 -->
<hr/>
<child2>
<!-- 这里直接对传过来的msg进行解构 -->
<template v-slot:c2='{msg}'>
<h1>作用域插槽c2--解构</h1>
{{msg}}
</template>
</child2>
也可以动态定义插槽名称
<child2>
<template v-slot:[dynamicSlotName]>
...
</template>
</child2>
子组件
<div class="child2">
<!-- 作用域插槽,将子组件data通过slot传递给父,只能在组件标签内使用 -->
<slot name='c2' :msg='msg'></slot>
</div>
简写
默认插槽的名称默认为 default
只有一个默认插槽时,v-slot:default可写作v-slot或不写
v-slot:c1 语法糖为 #c1