slot 插槽

插槽

可以在子组件里使用父组件的html结构

单个插槽

• 除非子组件模板包含至少一个插口，否则父组件的内容将会被丢弃
• 最初在slot 标签里的任何内容都被视为备用内容

父组件

<my-header>
	<p>666</p>
</my-header>

子组件

<header>
   <slot></slot>
</header>

具名插槽

• slot元素可以用一个特殊的元素的特性name来进行配置如何分发内容，多个插槽可以有不同的名字，具名插槽将匹配内容片段中有对应的slot特性的元素。
• v-：slot只能用在template
  父组件

<template v-slot:名字>
	<p></p>
</template>
        //普通元素也可以
<div slot="名字">
	<p></p>
</div>

子组件

<slot name="名字"></slot>

作用域插槽

• 在父组件访问子组件数据
• 作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，就像利用prop属性让子组件访问到父组件的数据一样
• slot-scope-作用域插槽

父组件

• v-：slot只能用在template

<template v-slot:defalut="{item}">
	<p></p>
</template>
//Vue2.5.0+，不需要template里定义，普通元素也可以
<div slot-scope="{item}">  //item指：{list："list"，name："name"}
	<p></p>
</div>	

子组件

  <slot :list="list" :name="name" name="default"></slot>