99.vue使用具名插槽

DAY20:
定义组件模板（PS：省略了一些布局的样式代码）：

<template>
  <div>
    <slot name="form"></slot>
    <!-- <slot name="tableHeader"> -->
    <div class="table-header">
      <div class="header-line"></div>
      <div class="header-left">
        <slot name="tableTitle">列表</slot>
        <span class="header-sub"><slot name="tableSubTitle"></slot></span>
      </div>
      <div class="header-right">
        <div class="header-right-content">
          <slot name="tableOperate"></slot>
        </div>
      </div>
    </div>
    <!-- </slot> -->
    <slot name="table"></slot>
  </div>
</template>
<script>
export default {
  name: 'commonTable',
  data() {
    return {}
  }
}
</script>

注册自定义组件（PS:手动引入）：

import CommonTable from '@/modules/components/common-table/index'
//注册为全局组件
Vue.component('common-table', CommonTable )

注册自定义组件（PS:自动引入）：

import Vue from 'vue'
//加载component下的所有组件
const requireComponent = require.context(
  // 其组件目录的相对路径
  '../components',
  // 是否查询其子目录
  true,
  // 匹配vue后缀文件名的文件
  /.vue$/
)
requireComponent.keys().forEach((fileName) => {
  let name = fileName.split('/')
//组件目录使用-连接方式命名的
  name = name[name.length - 1].split('.')[0]
  const componentConfig = requireComponent(fileName)
  const VM = componentConfig.default || componentConfig
//组件必须声明name属性，否则无法读取到文件名
  Vue.component(VM.name || name, VM)
})

main.js中引入自定义组件

import '@/modules/components' // 自定义组件

使用上面定义common-table组件，使用form和table插槽（PS:当然也可以定义操作栏参照相应格式即可）：

<template>
  <div class="page-box proxy-setup">
    <common-table>
      <template slot="form">
        <el-form :model="formData" label-width="90px">
        </el-form>
      </template>
      <template slot="table">
        <el-table  :data="tableData"></el-table>
      </template>
    </common-table>
  </div>
</template>