Vue插槽的使用

1.匿名slot
就是在父组件插入的子组件中写入html及css，子组件判断显不显示
子组件

<template>
<slot></slot>
</template>

父组件

<template>
<child>
<h1>这里有一个匿名插槽</h1>
</child>
</template>

2.具名slot
与匿名插槽效果相同，区别在于加上了name，已经选择那些展示，哪些不
子组件

<template>
<slot name="name"></slot>
</template>

父组件

<template>
<child>
<h1 slot="name">这里有一个具名插槽</h1>
</child>
</template>

3.作用域slot
带有数据的插槽，使父组件可以调用子组件的数据（不需要$emit，增加子组件复用性）
子组件

<template>
<slot :data="data"></slot>//data是子组件的数据，可以是数组也可以是其他
</template>

父组件

<template>
<child>
<template slot-scope="user">
<div>这是一个作用域插槽{{user.data}}</div>//这里父组件接受到了子组件的数据
</template>
</child>
</template>