目录

想要封装一个全局 (公共) 组件,首先必须知道哪三点?

如何封装?

 第一步:创建要封装成全局组件的文件

 第二步:构建组件结构 (插槽?)

 第三步:注册组件

         1.普通写法:用Vue.component() 注册全局组件

         2.优化后的写法:用Vue.use() 注册全局组件

第四步:使用

---

想要封装一个全局 (公共) 组件,首先必须知道哪三点?

        一:为什么要定义成全局的组件?

                   因为在项目中要多次使用

        二:组件对应的.vue文件放在哪里

                  components

        三:怎么定义公共(全局)组件 ? 

                   1.Vue.component('组件名',组件对象) 

                   2.Vue.use()

如何封装?

 第一步:创建要封装成全局组件的文件

在src目录下的components下面创建一个文件夹,在文件夹里放一个index.vue文件

 第二步:构建组件结构 (插槽?)

假设组件的内容只有左边和右边,那么组件的左边内容和右边内容可能会根据使用者的不同显示不同的内容，是不能写死的，我们可以通过具名插槽来做一下内容自定义优化,代码如下:

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

 第三步:注册组件

我们的业务组件一般都定义成了局部组件，使用的时候需要在components中注册，而我们全局通用组件一般是需要定义为全局组件的，不需要局部注册

         1.普通写法:用Vue.component() 注册全局组件

// 在入口文件 (main.js)中引入注册 ,为什么要在入口文件中引入注册,
// 因为我们注册的时候用到了vue,刚好入口文件中已经引入了
// 所以为了方便就在入口文件中引入注册

import 组件对象 from 'xxxxx.vue'
Vue.component('组件名', 组件对象)


import PageTools from '@/components/PageTools/index.vue'
Vue.component('PageTools', PageTools)

         2.优化后的写法:用Vue.use() 注册全局组件

import PageTools from '@/components/PageTools/index.vue'
const MyPlugin = {
	install(Vue) {
    console.log('install.....', obj)
    Vue.component('PageTools', PageTools)
  }
}
Vue.use(MyPlugin)

第四步:使用

当我们实现了全局注册之后，在业务组件中就不需要再引入和注册了，直接使用即可

<PageTools>
        <template #left>
          <span>总记录数:20条</span>
        </template>
        <template #right>
          <el-button type="warning" size="small">导入excel</el-button>
          <el-button type="danger" size="small">导出excel</el-button>
          <el-button type="primary" size="small">新增员工</el-button>
        </template>
</PageTools>