Vue slot 插槽靈活使用

說明: 常見語法請到官網查看, 本文收錄不常見的用法

可內嵌

slot插槽可以向<div>標籤一樣內容使用
例如:

<slot name="tableHeader">
      <el-header
        v-show="showHeader"
        style="height: 50px;"
        class="page_header"
        :style="[{borderColor: (handleBar.bottomLine.visible?'ebeef5':'#fff')}]"
      >
        <slot name="tableHeaderTitle">
          <h3 class="title">{{ $route.meta.title }}</h3>
        </slot>
        <section class="page_handler">
         ....
        </section>
      </el-header>
    </slot>