封装全局组价

封装在哪里:

    1.我们建议封装在src下面components下面.vue文件

    2.引入 solt 插槽让用户能自定义内容

   3. 就可以在对应的组件 引入 注册  以标签形式使用了(这一步呢比较麻烦 我们后面有更好的办法)

     <template>
            左侧具名插槽
       <div class="left">
          solt插槽   name是对应的名称
          <slot name="left">
              <span>文字区域</span>
          </slot>
       </div>
        
            右侧具名插槽
      <div class="right">
           solt插槽   name是对应的名称
        <!-- 右侧 -->
        <slot name="right">
          按钮区域
         </slot>
     </div>
 
</template>

用户自定义内容:

<template>
  <div class="employees-container">
    <div class="app-container">

        这个是注册组组件 以标签形式使用
      <page-tools>
        <!-- 插入到left插槽位置 -->
                在template上 插入对应的位置 要以#对应name
        <template #left>
          <span>本月: 社保在缴 公积金在缴  自定义内容 会显示到对应你name  left 的位置</span>
        </template>
         <!-- 插入到right插槽位置 -->
        <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>
      </page-tools>
      这个是注册组组件 以标签形式使用
        
    </div>
  </div>
</template>
<script>
        导入
  import PageTools from '@/components/PageTools'
  export default {
        注册
      components:{
         PageTools
      }
  }
</script>

封装全局组件的好处:

        能在多个组件中使用

定义全局组件的格式: 

//引入组件
  import  组件名字  from '@/component/x x x'
//注册组件
  Vue.component('组件名字',组件名字）

我们可以直接在main.js中直接注册全局(缺点: 以后很多全局组件我们还是要 引入 注册  )

        此时我们就不需要 引入 注册 我们可以直接的在对应的组件以标签形式使用了

//导入组件
import PageTools from '@/components/PageTools'

Vue.component('给组件取得名字', PageTools)

最终完善解决方案:

       掌握Vue.use()的用法，能用它来注册全局组件 

       它是Vue提供一个静态方法， 用来向Vue注册插件(增强vue的功能)。文档: https://cn.vuejs.org/v2/api/#Vue-use

格式:

1.Vue.use 可以接收一个对象，Vue.use(obj)

2.对象obj中需要提供一个 install 函数

3.在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器

步骤:(优点:在注册组件在 index唯一出口 导入进来 使用Vue.component()直接注册即可)

1.提供统一注册的入口文件 src/componets/index.js

2.然后再main.js中注册插件

导入统计路径下的组件 
import PageTools from './PageTools'

  // 进行注册
export default {
  install(Vue) {
    
    Vue.component('PageTools', PageTools)
  }
}

在main.js注册插件:

组件唯一出口  index.js 可以省略 默认
import Components from './components'

Vue.use(Components)

好了 我们下次见