20.番外篇——如何自定义组件并且进行全局配置
前言
通过之前的系列文章我们基本掌握了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>