v-slot插槽的使用

1.不使用具名插槽

父组件中

    <Home>
      父组件传给子组件的内容
    </Home>

子组件用<slot></slot>接

  <div>
    <div>下面是子组件内容</div>
    <div>-------------------</div>
    <slot></slot>
  </div>

效果：父组件的值插入到子组件中

2.v-slot 和slot的name属性结合

注意：v-slot 要放在<template></template>中
父组件：

    <Home>
      <template v-slot:header>父传子到其--头部</template>
      <template v-slot:footer>父传子到其--尾部</template>
    </Home>

子组件：

<template>
  <div>
    <div>下面是子组件内容</div>
    <div>-------------------</div>
    <slot name="header"></slot>
    <div>-------------------</div>
    <slot name="footer"></slot>
  </div>
</template>

效果：

2.作用域插槽

作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
slot-scope中接受子组件属性的一个集合
父组件

      <template slot="custom" slot-scope="prop">
        {{ prop.data }}--
        {{ prop.arr }}
      </template>

子组件：中自定义属性，数据，父组件可以接收到

    <div>插槽作用域</div>
    <slot
      name="custom"
      :data="'我是子组件自定义的字符串--父组件可以拿'"
      :arr="[1, 2, 3]"
    >
    </slot>