Vue - 插槽

父组件可以向子组件插入指定未知html结构，也是一种组件间通信方式，适用于 父组件 -> 子组件。

默认插槽#

父组件：
      <Student>
        <div>html结构</div>
      </Student>
子组件：
      <template>
        <div>
          <slot>插槽默认内容</slot>
        </div>
      </template>

具名插槽#

父组件：
      <Student>
        <template slot='nameOne'>
          <div>html结构</div>
        </template>
        或
        <template v-slot:nameOne>   //v-slot:只限在<template>标签中使用。
          <div>html结构</div>
        </template>
      </Student>
子组件：
      <template>
        <div>
          <slot name='nameOne'>插槽默认内容</slot>
        </div>
      </template>

作用域插槽#

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。

父组件：
    <Student>
      <template scope="h">
        <ol>
          <li v-for="(item,index) in h.hzc" :key="index">{{item}}</li>
        </ol>
      </template>
    </Student>

子组件：
    <template>
      <div>
        <slot :hzc="numberStr"></slot>
      </div>
    </template>

    <script>
    export default {
      name: "Student",
      data(){
        return{
          numberStr:['one','two','three']
        }
      }
    }
    </script>