Vue中slot的使用

slot 是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子之间传参；

开发背景(slot出现时为了解决什么问题)：
正常情况下,hello world在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时需要使用slot插槽；

Slot的通俗理解

是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容；

实际的一次使用，面包屑slot实现

子组件使用slot，name指定插槽名称，子组件在this.$slots上能拿到参数

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-if="$slots.one">
      <slot name="one"></slot>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-if="$slots.two">
      <slot name="two"></slot>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-if="$slots.three">
      <slot name="three"></slot>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
  export default {
    name: 'breadcrumb'
  }
</script>

挂在到vue全局上

import Breadcrumb from './Breadcrumb.vue'
export default {
  install (Vue) {
    Vue.component(Breadcrumb.name, Breadcrumb)
  }
}

父组件中使用

<breadcrumb>
  <span slot="one">
    文章列表
  </span>
  <span slot="two">
    新建文章
  </span>
</breadcrumb>

slot的细节

1、组件中有单个或多个未命名slot标签时，如下：

<Child><span style=”color:red;”>hello world</span></Child>  

<template>    
  <div>
    <slot></slot>
    <slot  style=”color:blue;” >这是在slot上添加了样式</slot>
    <slot  name=”mySlot”>这是拥有命名的slot的默认内容</slot>
  </div>
</template>

会输出：两个红色的hello world，以及一个使用slot的默认内容
注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；

2、组件中有多个命名的slot插槽时，可以实现父组件对子组件的指定位置显示内容或传参，如下：

<Child>
	<span slot="header">hello world</span>	
	<span slot="main">hello world</span>	
	<span slot="footer">hello world</span>	
	<span slot="other">{{otherData}}</span>
</Child>

<template>
	<div>
		<slot  name=”header”>这是拥有命名的slot的默认内容</slot>
		<slot  name=”main”>这是拥有命名的slot的默认内容</slot>
		<slot  name=”footer”>这是拥有命名的slot的默认内容</slot>
		<slot  name=”other”>这是拥有命名的slot的默认内容</slot>
	</div>
</template>

3、作用域插槽！！：
使用时候子组件标签中要有标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；

作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式：

   <ul>
      <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >
         slot的默认内容
      </slot>
   </ul>

   <Child>
      <template slot="item" scope="props">
        <li>{{props.myname}}</li>
      </template>
   </Child>

总结：
1.name的值和slot的值相等，才能插入对应的插槽。传值通过父级scope对应拿到子级name的值实现。
2.template用来写 html 模板的，作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

<template>
    <div class="root">
        <template>看看外面的标签是什么</template>
    </div>
</template>

template不会被渲染到页面上
3.scope和slot-scope的区别

原文链接：https://blog.csdn.net/zhouzuoluo/article/details/80536754