如何定义全局自定义组件 如何把自定义组件作为插件使用Vue.use()使用 包含(vue3.0)

如何定义全局自定义组件 如何把自定义组件作为插件Vue.use()使用

定义组件

<template>
  <el-card>
    <div class="page-tools">
      
      <div class="left">
        <div class="tips">
          <i class="el-icon-info" />
          
          <slot name="left">
            文字区域
          slot>
        div>
      div>
      <div class="right">
        
        <slot name="right">
          按钮区域
        slot>
      div>
    div>
  el-card>
template>

<script>
export default {}
script>

<style lang="scss" scoped>
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tips {
    line-height: 34px;
    padding: 0px 15px;
    border-radius: 5px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
    i {
      margin-right: 10px;
      color: #409eff;
    }
  }
}
style>

在main.js中把此组件定义为全局组件

// 注册全局组件
//导入定义的全局组件
 import 组件对象 from '@/components/组件路径'
 Vue.component('组件在vue里面使用的标签名', 组件对象)

第二种方法 如何把自定义组件作为插件使用

在components定义index.js文件导入公共组件

// 提供统一的注册入口文件
// import Vue from 'vue'
import 组件对象 from '@/components/组件路径'
...
很多组件
...
export default {
  install(Vue) {
     Vue.component('组件在vue里面使用的标签名', 组件对象)
     ...
     很多
     ...
  }
}

在main.js使用use导入插件

// 注册全局组件
// import PageTools from '@/components/PageTools/index.vue'
// Vue.component('PageTools', PageTools)
// Components 插件名  ./components 插件路径
import Components from './components'
// 把插件挂载到Vue上
Vue.use(Components)

使用

  直接使用定义好的组件名使用 这里使用了具名插槽把单个组件需要的内容传入到公共组件
<PageTools>
        
        <template #left>
          <span>本月: 社保在缴 公积金在缴span>
        template>
        
        <template #right>
          <el-button type="warning" size="small">导入excelel-button>
          <el-button type="danger" size="small">导出excelel-button>
          <el-button type="primary" size="small">新增员工el-button>
        template>
      PageTools>

效果

没有传入的效果

传入后效果

vue3.0用法

管理组件的js文件:

import 组件名 from '组件所在路径'
export default {
  install (app) {
    // 在app上进行扩展，app提供 component directive 函数
    // 如果要挂载原型 app.config.globalProperties 方式
    app.component(在标签中使用的名字, 导入的组件名)
    app.component(在标签中使用的名字.name, 导入的组件名)
  }
}

在main里面当成插件注册到全局:

import 自己定义插件名 from '上面的管理组件的js文件路径'
createApp(App).use(store).use(router).use(自己定义的插件名).mount('#app')