20.番外篇——Vue如何自定义组件并且进行全局配置

前言

通过之前的系列文章我们基本掌握了vue项目开发的流程和方式，但是对vue的一些功能用法仍然存在缺失。最近公司刚好转型技术栈，使用Ant Design Vue配合Vue进行前端项目的开发，虽然和之前的UI框架不同，但是用法大同小异。借此机会，正好利用番外篇说明下Ant Design Vue和Element UI的异同，并且补全之前没有进行说明的一些技术点和开发规范。

1.创建自定义组件

以一个简单的Ant Design Vue面包屑组件为例，官方的示例用法如下：

<template>
  <a-breadcrumb>
    <a-breadcrumb-item>Home</a-breadcrumb-item>
    <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
    <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
    <a-breadcrumb-item>An Application</a-breadcrumb-item>
  </a-breadcrumb>
</template>

项目中，我们在components下新建的breadcrub文件夹新建Breadcrumb.vue（自定义组件内容）和index.js（导出自定义组件）两个文件。

自定义面包屑组件Breadcrumb.vue代码如下：

<template>
  <!-- 面包屑区域 -->
  <a-breadcrumb class="SimpleBreadcrumb" :separator="separator">
    <!-- 因为本项目首页永远在面包屑第一级，所以直接写死路由和标题，如果没有可以删除本行 -->
    <a-breadcrumb-item><a href="/users#/users">首页</a></a-breadcrumb-item>
    <!-- 二级和三级面包屑 -->
    <a-breadcrumb-item v-for="(item,index) in items" :key="index"><a :href="'/users#' + item.href">{{item.title}}</a></a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
export default {
  name: 'SimpleBreadcrumb',
  // props中的变量（以下简称prop）用于传入父组件的值
  // 前端开发规范中，prop必须定义类型和默认值，并且对于Boolean类型的值，建议使用is为开头的驼峰命名，比如isShow
  props: {
    // 自定义分隔符
    separator: {
      type: String,
      default: '>'
    },
    // 面包屑二级和三级的路由和标题
    items: {
      type: Array,
      default: () => [
        {
          href: '/users',
          title: '用户管理'
        },
        {
          href: '/users',
          title: '用户列表'
        }
      ]
    }
  },
  data () {
    return {

    }
  },
  created () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>

2.导出自定义组件

在自定义组件同目录下的index.js文件中定义该组件作为公共组件的名称并且进行全局注册：

import Breadcrumb from './Breadcrumb.vue'
const MyBreadcrumb = {
  // install 为Vue实例上的一个方法
  install: function (Vue) {
    // 注册全局组件，此时MyBreadcrumb为使用的组件名称
    Vue.component('MyBreadcrumb', Breadcrumb)
  }
}
// 导出组件
export default MyBreadcrumb

3.main.js中引入自定义的公共组件并挂在到Vue

// 引入自定义组件
import MyBreadcrumb from './components/breadcrumb'
// 挂载自定义组件
Vue.use(MyBreadcrumb)

4.使用自定义的公共组件

接着就可以在项目中的任何地方使用该组件了。props中的变量在父组件中可以重新传入进行覆盖或者不传则使用默认值。本例中对面包屑二级和三级变量items进行了覆盖处理，对自定义分隔符separator不做处理，仍然使用默认值。

<template>
  <div>
    <!-- 面包屑区域 -->
    <my-breadcrumb :items="items"></my-breadcrumb>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {
          href: '/roles',
          title: '权限管理'
        },
        {
          href: '/roles',
          title: '角色列表'
        }
      ]
    }
  },
  created () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>