vue slot插槽的使用介绍及总结

官方文档解说<slot> 元素作为承载分发内容的出口，在我的理解就是slot元素就是一个预留占位坑，我们可以通过在子组件中设置<slot>元素的位置，然后在父组件中按需设置具体的展示内容。
所以slot的出现可以让我们在父组件中，控制传递各种类型的内容到子组件，从而实现我们想要的内容展示。

在介绍插槽的具体类型以前我们先梳理一下插槽和prop数据内容的区别，同为父子组件间数据传递，它们有什么区别呢？
答案就是：父组件通过props向子组件传递数据，通过插槽向子组件传递内容，其中prop传递的是组件的属性，插槽传递的VNode节点。
先来简单看一个插槽例子：

eg:
<!-- 父组件 -->
<template>
  <div>
    <SoltCom>
      <p>我是插槽展示内容</p>
    </SoltCom>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>我是子组件</p>
    <slot></slot>
  </div>
</template>

运行代码我们将看到‘我是插槽展示内容’将展示在‘我是子组件’下方。

插槽还具有以下特点
1:可以使用父组件的数据，拥有和父组件一样的实例属性，这一点可以很好的实现父子组件传参。（但是不拥有子组件的实例属性，因为父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的）

2：还可以设值插槽默认值即后备内容
即当父组件没有传递内容的时候，插槽部分将显示子组件设置的默认内容，如果父组件有传递具体内容将覆盖插槽的默认内容。

eg:
<!-- 父组件 -->
<template>
  <div>
    <p>我是父组件</p>
    <SoltCom></SoltCom>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>我是子组件</p>
    <slot>我是默认插槽内容</slot>
  </div>
</template>

3：可以根据 slot元素的name属性为插槽内容指明名字，这样可以将内容放到指定位置,又叫具名插槽 。
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

eg:
<!-- 父组件 -->
<template>
  <div>
    <SoltCom>
      <p>我是父组件</p>
      <template v-solt:header><p>我是头部</p></template>
      <template v-solt:footer><p>我是尾部</p></template>
      <p>我是无名插槽</p>
    </SoltCom>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>我是子组件</p>
    <slot name="header"></slot>
    <slot name="footer"></slot>
    <slot></slot>
  </div>
</template>

注：1:跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #(此时绑定元素要为template)。例如 v-slot:header 可以被重写为 #header，v-solt:footer 重写为#footer
2:也可以简写成solt="header" solt="footer",并且可以把slot直接绑定在一个普通的元素上而非 template上
eg: <h1 slot="header"><p>我是头部</p></h1>

4：插槽可以设置作用域，实现子组件向父组件传递数据。此插槽叫做作用域插槽
作用域插槽就是在父组件中书写的插槽内容可以访问使用子组件的数据。
最开始介绍vue插槽的时候我们说过，插槽内容可以使用父组件的数据，拥有和父组件一样的vue实例，而访问不了子组件数据。这个作用域插槽可以完美实现插槽内容访问子组件实例数据。
实现这种跨域访问的功能只需要在子组件<slot>元素上绑定需要传递到父组件的值（被称为插槽 prop），并在父组件中通过v-solt:default="xxx"(简写：v-solt="xxx"),来接受子组件传过来的数据并通过xxx.来访问。
eg:

<!-- 父组件 -->
<template>
 <p>我是父组件</p>
 <SlotB v-slot="scope">
    {{scope.test.begin}}
  </SlotB>
</template>
<!-- 子组件 -->
<template>
  <div>
    <p>我是子组件</p>
    <slot :test="test"></slot>
  </div>
</template>
<!-- 子组件data -->
data(){
  return{
    test:{
      begin:'begin',
    }
  }
}

从此例子我们可以验证得到通过作用域插槽我们可以实现子组件向父组件传递参数。其实在实际工作中，像例子中的需求好像使用不多，作用域插槽具体使用场景看了大多例子如下：

<!-- 父组件 -->
<template>
  <ChildCom :personInfo='personInfo'>
    <template slot-scope="scope">
      <p class="slot-p"><label class="demo">姓名：</label>{{scope.item.name}}</p>
      <p class="slot-p">性别：{{scope.item.sex === 0 ? '男' :'女'}}</p>
      <p class="slot-p">是否成年：{{scope.item.age >= 18 ? '已成年' :'未成年'}}</p>
    </template>
  </ChildCom>
  <ChildCom :personInfo='ObjInfo'>
    <template slot-scope="scope">
      <p class="slot-p"><label class="demo">类型：</label>{{scope.item.name}}</p>
      <p class="slot-p">大小：{{scope.item.size}}</p>
      <button v-if="scope.item.haveBtn">{{scope.item.haveBtn}}</button>
    </template>
  </ChildCom>
</template>
<!-- 子组件 -->
<template>
  <ul>
    <li>
      <slot v-for="(item) in personInfo" v-bind:item="item">{{item.name}}</slot>
    </li>
  </ul>
</template>

运行结果

其中personInfo、ObjInfo为父组件数据，这样我们在子组件中将每次循环的数据传递给父组件使用并在父组件中处理各种逻辑，子组件只是负责基础布局，父子组件分工明确，并且可以自由配置实现组件的复用。

其实写到这我也有疑问，为什么这个数据要传来传去呢，直接在父组件中遍历插槽内容不就好了，为何还要传到父组件，再通过作用域插槽传回来呢？，一直没有想太明白等想明白了再说

另外我们可以使用解构赋值来传入具体的插槽prop因为作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里。具体使用方法如下
eg:

<!-- 父组件 -->
<template>
<p>我是父组件</p>
 <SlotB v-slot="{test}">
    {{test.begin}}
  </SlotB>
</template>
<!-- 子组件 -->
<template>
  <p>我是子组件</p>
  <div>
     <slot :test="test"></slot>
  </div>
</template>
<!-- 子组件data -->
data(){
  return{
    test:{
      begin:'begin',
    }
  }
}

以上就是vue插槽的大概介绍，看懂了api不算掌握了使用方法，具体使用还是要在实际工作中多思考，多尝试，多运用而不是单纯的复制、粘贴。