插槽 slot

【vue内置组件 slot 的使用】

1、什么是插槽？

插槽是子组件提供给父组件的一种占位符，用 <slot></slot> 表示。

插槽可分为 默认的插槽：可用于父组件向子组件传递用标签包裹的数据 

                   具名插槽   ： 起了名字的插槽，可以用于在特定的位置使用插槽

                   作用域插槽：可用于子组件向父组件传递数据

2、如何使用插槽？

（1）、使用默认插槽：

//父组件中
<com>
   <p>使用默认插槽</p>
</com>

//子组件中
<template>
  <div>
    <slot></slot>
  </div>
</template>

（2）、使用具名插槽

//父组件中
 <com>
    <template #header>
      <p>使用具名插槽</p>
    </template>

    <template v-slot:header>
      <p>使用具名插槽</p>
    </template>
 </com>

//子组件中
  <slot name="header"></slot>

（3）、使用作用域插槽

//父组件中
<com>
  	<template v-slot:header="scope">
	    <p>header {{scope}}</p>
	</template>
</com>

//子组件中
<template>
	<div>
		<slot name="header" :a="a" :b="b" :c="c" age="9"></slot>
	</div>
</template>

<script>
	export default {
		data:function(){
			return {
				a:1,
				b:2,
				c:3
			}
		}
	}
</script>