插槽（slot）

1、什么是插槽？

父组件所携带的内容插入到子组件的某个位置。插槽是vue实现内容分发的一套api，通过slot标签作为分发内容的出口。

插槽显示不显示以及显示什么，由父组件决定，插槽显示在哪里，由子组件决定。

作用：

使模块分块，更具模块化和重用性。

2、用法：

默认插槽：

父组件：
<template>
    <div>
        <children>
            <input :value="value" v-model="value"/>
        </children>
    </div>
<template>
                
data(){
    return{
        value:123
    }            
 }


子组件：
<template>
    <div>
        <p>5555</p>
        <slot>默认内容</slot>  //这个位置将会被<input :value="value" v-model="value"/>替换，如果没有input，则显示子组件的默认内容。
    </div>
<template>

具名插槽：

子组件：
<template>
  <div class="slottwo">
    <div>slottwo</div>
    <slot name="header"></slot>
    <slot></slot>  //没有指定name，则 name 为 default
    <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（也可以不写template）来写入对象的slot值来对应子组件中的name，没有slot值的对用default。

作用域插槽：

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

插槽的内容因为是定义在父组件中，若想获取子组件的数据，则可通过slot-scope来接收子组件传过来的变量对象slotProps。

父组件：
<div>
    <todo-list>
      <!--slotProps 变量用于接收子组件传递过来的对象-->
        <span slot-scope="slotProps" v-if="slotProps.todo.isComplete">{{ slotProps.todo.text }}</span>
    </todo-list>
</div>

子组件：
<ul>
 <li
  v-for="todo in list"
  :key="todo.id"
 >
  <!-- 我们为每个 todo 准备了一个插槽，-->
  <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
  <slot :todo="todo">
  </slot>
 </li>
</ul>

5、使用场景

 <el-dialog
      :visible.sync="dialog"
      width="400px"
      center>
      <template slot="title">
        <div class="alertTitle">
            <img src="../assets/admin.png">&nbsp; &nbsp;<span>编辑</span>
        </div>
      </template>
      <el-form class="inputBox" :model="editCont" label-width="100px">
        ...
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="dialog = false">取 消</el-button>
      </span>
 </el-dialog>