vue中slot（插槽）的介绍与使用

<template>
 <div>
 我是父组件
 <slotOne1>
  <p style="color:red">我是父组件插槽内容</p>
 </slotOne1>
 </div>
</template>

<template>
 <div class="slotOne1">
 <div>我是slotOne1组件</div>
 <slot></slot>
 </div>
</template>

<template>
 <div>
 我是父组件
 <slotOne1>
  <p style="color:red">我是父组件插槽内容</p>
  <slot-one2></slot-one2>
 </slotOne1>
 </div>
</template>

<template>
 <div class="slotOne2">
 我是slotOne2组件
 </div>
</template>

<template>
 <div class="slottwo">
 <div>slottwo</div>
 <slot name="header"></slot>
 <slot></slot>
 <slot name="footer"></slot>
 </div>
</template>

<template>
 <div>
 我是父组件
 <slot-two>
  <p>啦啦啦，啦啦啦，我是卖报的小行家</p>
  <template slot="header">
   <p>我是name为header的slot</p>
  </template>
  <p slot="footer">我是name为footer的slot</p>
 </slot-two>
 </div>
</template>

<template>
 <div>
 我是父组件
 <slot-two></slot-two>
 </div>
</template>

<template>
 <div class="slottwo">
 <slot>我不是卖报的小行家</slot>
 </div>
</template>

<template>
 <div>
 我是父组件
 <slot-two>
  <p>{{name}}</p>
 </slot-two>
 </div>
</template>
<script>
export default {
 data () {
 return {
  name： 'Jack'
 }
 }
}
</script>

<template>
 <div class="slottwo">
 <slot></slot>
 </div>
</template>

<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>

<template>
 <div>
 我是作用域插槽
 <slot-three>
  <template slot-scope="user">
  <div v-for="item in user.data" :key="item.id">
  {{item}}
  </div>
  </template>
 </slot-three>
 </div>
</template>