slot插槽

一、什么是插槽？

插槽：子组件提供给父组件使用的一个占位符，用<slot></slot> 表示，
而父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

---

二、插槽的分类

一、匿名插槽

1. 没有设置name属性的插槽，
2. 一个组件中只能有一个匿名插槽，
3. 匿名插槽只能作为没有slot属性的元素的插槽。

//child 子组件
<template>
    <div>
        <h5>我是子组件</h5>
        <slot>这是个匿名插槽(没有name属性)</slot>
    </div>
</template>

//parent 父组件
 <template>
    <div>
        <h3>我是一个父组件</h3>
       // <!--子组件内容 ↓ -->
        <child>
        //“这里是子组件内容！” 会将 “这是个匿名插槽(没有name属性)” 替换掉
           <div>
                这里是子组件内容！
            </div>
        </child>
    </div>
</template>

//展示页面
我是一个父组件
这里是子组件内容！

二、具名插槽

为插槽添加了name属性，可以添加多个聚名插槽

//child  子组件
<template>
  <div>
    <slot name="header"></slot>
    <h1>我是子组件</h1>
    <slot name="footer"></slot>
  </div>
</template>

//parent 父组件
<template>
	<Child>
		<span slot="header">我是header</span>
  		<span slot="footer">我是footer</span>
	</Child>
</template>

三、作用域插槽

父组件能接收来自子组件的slot传递过来的参数
作用域插槽必须放在template里面（父组件中）
template标签中的属性slot-scope="props"声明从子组件传递的数据都放一个自定义属性内。

---

插槽实现原理

当子组件vm实例化时，获取到父组件传入slot标签的内容，存放在 vm.$slot 中，默认插槽为vm.$slot.default， 具名插槽为vm.$slot.xxx，xxx 为插槽名，
当组件执行渲染函数时候，遇到slot标签，使用$slot（父组件传入slot标签的内容）中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。

---

三、v-slot、slot、slot-scope

一、 slot 的使用(匿名插槽&具名插槽)

查看上面的例子

二、 v-slot 的使用

1. 在一个 <template>元素上使用 v-slot 指令，并以 v-slot 的参数形式提供其名称
2. 与v-on 和 v-bind 一样，v-slot 也有缩写，即把 v-slot: 替换为字符 #。

<Child  #default="{ childData}">
  {{ childData.Name }}
</Child >

三、slot-scope的使用

//child 子组件 
<template class="child">
    <div>
       <slot name="default" :msg="msg"> </slot>
       <p>这里是child 组件</p>
    </div>
 </template>

//parent 
<template>
	<child>
		//作用域插槽的用法（slot-scope）
    	<div slot="default" slot-scope="childData">
          	{{ childData.msg }}
     	</div>
	</child >
<template>

---