一 插槽的作用

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式

二 插槽的种类

1. 默认插槽

<template>
  <div>
    <child>slot内容</child>
  </div>
</template>
<script>
import child from './child'
export default {
  components:{
    child
  }
}
</script>
 
// 子组件
<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
    export default {
        name: 'child'
    }
    
</script>

2. 具名插槽

// 父组件
<template>
  <div>
    <child>
      <div slot="header">header</div>
      <div slot="body">body</div>
    </child>
  </div>
</template>
 
//子组件
<template>
<!-- 子组件 -->
  <div>
    <slot name='header'></slot>
    <slot name='body'></slot>
  </div>
</template>

作用域插槽

// 父组件
<div>
    <child>
        <!-- 使用作用域插槽，需要用template包裹 -->
		<template slot-scope="youxi">
                    <div>{{youxi.list}}</div>
		</template>
	</child>
</div>


// 子组件
<template>
	<div>
		<slot :list="list">这是子组件的内容</slot>
	</div>
</template>
<script>
	export default {
		name:'child',
		data() {
			return {
				list:['苹果','香蕉','葡萄','橘子'],
			}
		},
	}
</script>