vue 组件注册 插槽使用等知识

vue 组件注册 插槽使用等知识

要注册的组件

<template>
  <el-card class="page-tools">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <div  v-if="showBefore" class="before">
          <i class="el-icon-info" />
          <!-- 定义前面得插槽 重点-->
          <slot name="before" />
        </div>
      </el-col>
      <el-col>
        <el-row type="flex" justify="end">
           <!-- 定义后面的插槽 -->
           <slot name="after" />
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

slot 是插槽，name规定了是哪个具体插槽，使用的使用根据name进行自动分类

<slot name="before" />

插槽注册

// 该文件负责所有的公共的组件的全局注册   Vue.use
import PageTools from './PageTools'
export default {
  install(Vue) {
    //  注册全局的通用栏组件对象
    Vue.component('PageTools', PageTools)
  }
}

main.js 引入

import Component from '@/components'
Vue.use(Component) // 注册自己的插件

方法

根据组件提供的直接使用

  <span slot="before">共166条记录</span>  

根据组件提供的 进行自定义使用

<template slot="after">

具体使用

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">共166条记录</span>
        
        <template slot="after">
          <el-button size="small" type="warning">导入</el-button>
          <el-button size="small" type="danger">导出</el-button>
          <el-button size="small" type="primary">新增员工</el-button>
        </template>
              </page-tools>
    </div>
  </div>
</template>

结果