slot插槽分发内容

//父组件像指定位置分发内容

// 多个插槽也叫具名插槽

子组件：

<template>
    <header class="el-header" :style="{height}">
      <div class="noneSlot">
        <slot></slot>
      </div>
      <div class="test-two">
        <slot name="two"></slot>
      </div>
      <div class="test-one">
        <slot name="one"></slot>
      </div>
    </header>
</template>

<script>
    export default {
      data() {
          return {}
      },
      componentName: 'ElHeader',
      props: {
          height: {
            type: String,
            default: '60px'
          }
      }
    }
</script>

父组件：

<el-header height="200px">
      <div slot="one">
        <span>第一个</span>
      </div>
      <div>
        <span>此div没有slot</span>
      </div>
      <div slot="two">
        <span>第二个</span>
      </div>
</el-header>

作用域插槽（将父组件的值传到子组件供使用）

<el-header :items="items">
  <template slot-scope="props">
    <span>{{ props.addr }}</span>
    <span>{{ props.cname }}</span>
    <span>{{ props.age }}</span>
  </template>
</el-header>

子组件：

<template>

    <header class="el-header">
      <slot :cname="items[1].cname"></slot>
      <slot :addr="items[1].addr"></slot>
    </header>
</template>

网上的粒子：

  slot类似于面向对象中的多态，比如有一个alert组件：默认样式<alert></alert>

阻止