普通插槽

在嵌入的组件标签中加入内容，如果子组件中有slot就显示，否则就是不显示
父组件

<h1>Hello 父组件</h1>
<Child><p>这是一些初始内容</p><p>这是更多的初始内容</p>
</Child>

子组件

<h1>Hello World</h1>
<slot></slot>

如果不加入slot里的内容就不会显示Child里面的内容

具名插槽

用来筛选插槽里的template内容），在子组件通过name来选定指定内容

父组件

 <h1>Hello组件</h1><Child><template slot="header"><p>我是name为header的slot</p></template><template slot="footer"><h1>我是name为footer的slot</h1></template></Child>

子组件

<h1>Hello World</h1><slot name='header'></slot><slot name='footer'></slot>

作用域传参

拿到子组件里data的值
父组件

我是作用域插槽
父组件

<Child><template slot-scope="user"><div v-for="item in user.data" :key="item.id">{{item}}</div></template></Child>

子组件

<template><div>我是作用域插槽的子组件<slot :data="user"></slot></div>
</template><script>
export default {name: 'slotthree',data () {return {user: [{name: 'Jack', sex: 'boy'},{name: 'Jone', sex: 'girl'},{name: 'Tom', sex: 'boy'}]}}
}
</script>