一, 图示说明:

1. 在后续的业务开发中，经常会用到一个类似下图的工具栏，可作为公共组件进行封装，方便复用

2.上面的这一块就全局使用,写一个大概的构架,下面圈起来的部分就哪个页面就使用插槽嘛,去加入

自己想改的样式呗

  1.              ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624904153030-e6042b37-de97-4037-8a05-b01574126ce9.png#clientId=u176f58cc-23b5-4&from=paste&height=240&id=u168b19cc&margin=%5Bobject%20Object%5D&name=image.png&originHeight=240&originWidth=553&originalType=binary&ratio=1&size=41877&status=done&style=none&taskId=uabf68b50-62de-483e-a658-3ffa566b8f3&width=553)

二 . 封装组件以及用插槽使用组件

1. 封装组件:

在src/components下面补充创建 PageTools/index.vue (准备被别的组件引入的)，

内容如下：

  1. <template>
  2.   <el-card>
  3.     <div class="page-tools">
  4.       <!-- 左侧 -->
  5.       <div class="left">
  6.         <div class="tips">
  7.           <i class="el-icon-info" />
  8.           <span>文字区域</span>
  9.           </div>
  10.       </div>
  11.       <div class="right">
  12.         <!-- 右侧 -->
  13.         按钮区域
  14.       </div>
  15.     </div>
  16.   </el-card>
  17. </template>
  19. <script>
  20. export default {}
  21. </script>
  23. <style lang="scss" scoped>
  24. .page-tools {
  25.   display: flex;
  26.   justify-content: space-between;
  27.   align-items: center;
  28.   .tips {
  29.     line-height: 34px;
  30.     padding: 0px 15px;
  31.     border-radius: 5px;
  32.     border: 1px solid rgba(145, 213, 255, 1);
  33.     background: rgba(230, 247, 255, 1);
  34.     i {
  35.       margin-right: 10px;
  36.       color: #409eff;
  37.     }
  38.   }
  39. }
  40. </style>

出来就是这样的:

  1.                          ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624905073309-2fb9112d-a836-43b8-a115-7bff41179a17.png#clientId=u176f58cc-23b5-4&from=paste&height=56&id=u6833bdd3&margin=%5Bobject%20Object%5D&name=image.png&originHeight=56&originWidth=526&originalType=binary&ratio=1&size=6178&status=done&style=none&taskId=ubab4b9a3-3096-4a1c-a4fc-e1d32cce4d1&width=526)

2. 引入插槽让用户能自定义内容(直接到这一步来吧!)

  1.                                   ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624905222382-9a0a08b1-1ae5-4da9-8852-0753748d6dca.png#clientId=u176f58cc-23b5-4&from=paste&height=310&id=u32d41cb1&margin=%5Bobject%20Object%5D&name=image.png&originHeight=310&originWidth=237&originalType=binary&ratio=1&size=10753&status=done&style=none&taskId=ua4837bfd-0902-4bfa-bef8-f57018f60c0&width=237)

说明:

上面我们使用了两个具名插槽，将来在使用组件的时候，只需要按照对应的插槽名称就可

以在特定的位置插入内容。

3. 使用组件

我们在员工管理的业务组件内部直接通过使用局部组件的方式将page-tools使用起来，

并注入自定义内容。

设置 src/views/employees/employees.vue, 内容如下：

  1.    ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624905738409-b71ee957-77b0-4972-ba9b-5cf423ff1403.png#clientId=u176f58cc-23b5-4&from=paste&height=509&id=u1da22de0&margin=%5Bobject%20Object%5D&name=image.png&originHeight=509&originWidth=517&originalType=binary&ratio=1&size=35090&status=done&style=none&taskId=u3f19a910-4e5b-4fac-bd28-e1613e16bc9&width=517)

小结:

  1.        1.定义组件时，在template中用slot 定义插槽
  3.        2.使用组件时，通过<组件> 传入结构 </组件>

三: 用 Vue.use — 全局使用工具栏组件

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

1. 步骤:

1. 在 src/componets/index.js 里面统一注册的入口文件

  1. import PageTools from './PageTools'
  2. export default {
  3.   install(Vue) {
  5.     Vue.component('PageTools', PageTools)
  6.   }
  7. }

2.在 main.js 中注册插件

  1. import Components from './components'
  2. Vue.use(Components)

所以,最后就不用再在组件里面导入注册了!!!

image.png