slot插槽的使用

slot翻译为插槽，子组件中有一部分内容可以根据父组件传过来的dom进行显示，用slot标签表示；父组件可以在这个占位符中填充内容。
若是子组件中没有slot，则父组件传给它的任何内容都不显示!

1.匿名插槽

父组件传递到子组件的内容需要子组件用slot来占位置

<!-- 父组件 -->
<template>
    <div>
        <Child>
            <div>3.8女神节!</div>
        </Child>
    </div>
</template>
<!-- 子组件 -->
<template>
    <div>
        <h1>今天的节日是：</h1>
        <slot></slot>
    </div>
</template>

2.具名插槽

子组件中name的名字与父组件中slot的值相对应

<!-- 父组件 -->
<template>
  <div>
    <Child>
       <div slot="child">今天你真的好美!</div>
       <!-- 或者写v-slot,但只能写在template上, vue3.0语法-->
       <template v-slot:child>今天你真的好美!</template>
    </Child>
  </div>
</template>
<!-- 子组件 -->
<template>
    <div>
       <slot name="child"></slot>
    </div>
</template>

3.作用域插槽

slot-scope实现了父组件获取子组件的数据进行展示
props是个变量，可以随便取，但不能取关键字

<Child>
  <template slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
</Child>

slot-scope 也可以直接用于非 template 元素 (包括组件)：

<Child>
  <span slot-scope="slotProps">
    {{ slotProps.msg }}
  </span>
</Child>

slot-scope中也可以使用解构赋值

<Child>
  <span slot-scope="{ msg }">
    {{ msg }}
  </span>
</Child>

<!-- 父组件 -->
<template>
    <Child>
        <template slot='child' slot-scope="props">
            <li>{{props.option}}</li>
        </template>
    </Child>
</template>
<!-- 子组件 -->
<template>
    <div>
        <slot name='child' :option="item.option" v-for="item in options">
        </slot>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                options: [
                    {
                        option: "男",
                        num: "28",
                    },
                    {
                        option: "女",
                        num: "30",
                    },
                ],
            }
        }
    }
</script>

props里存放的是数组里每一项的option ，通过:option="item.option"来传递

当我们看到这个是不是有似曾相似的感觉

<el-table-column label="跳转至">
  <template slot-scope="props">
    <!-- {{$log(props)}} -->
    <el-select v-model="props.row.jumpTo" placeholder="请选择">
      <el-option
        v-for="item in optionArray"
        :key="item.id"
        :label="item.label"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </template>
</el-table-column>

我们把上面的具名插槽改为匿名插槽就可以了

<!-- 父组件 -->
<Child>
   <template  slot-scope="props">
       <li>{{props.option}}</li>
   </template>
</Child>
<!-- 子组件 -->
<slot :option="item.option" v-for="item in options"></slot>

4.判断是否使用了插槽

4.1匿名插槽

<div v-if="$slots.default">
      <slot></slot>
</div>

4.2具名插槽

<div v-if="$slots.footer">
      <slot name="footer"></slot>
 </div>

4.3作用域插槽

<div slot-scope="scope" v-if="$scopedSlots.default">
      <slot :scope="scope"></slot>
</div>

五.总结

匿名插槽和具名插槽实现父=>子传递内容
作用域插槽实现了子=>父传递内容

更多请参考插槽