在Vue中我们都是用过slot，但是如果更高的定义与使用是个难题，本文就带你解锁这个技能。

直接上代码

1. 组件部分

<template>
  <div class="view">
      <div class="header">
          <slot></slot>
      </div>
      <div class="content">
          <slot name="content"></slot>
      </div>
      <div class="foot">
          <slot name="foot" v-bind="{isShow:true}"></slot>
      </div>
  </div>
</template>

2. 使用

<template>
  <div class="view">
    <component0>
      <template>
        <div>头部(默认插槽)</div>
      </template>
      <template v-slot:content>
        <div>内容（具名插槽）</div>
      </template>
      <template v-slot:foot="param">
          <div>尾部内容</div>
        <div v-if="param.isShow">是否展示尾部 备案说明（作用域插槽）</div>
      </template>
    </component0>
  </div>
</template>
<script>
import component0 from "./component0";
export default {
  components: {
    component0,
  },
};
</script>

个人理解

• slot 用的好就是事半功倍，用的不好就是坑后人
• slot 中配合使用其他组件达到组件的组合使用
• 作用于slot 多用于动态组件中