前言

通过之前的系列文章我们基本掌握了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为开头的驼峰命名，比如isShowprops: {// 自定义分隔符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>

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

CORS跨域时axios无法获取服务器自定义的header信息 - 番外篇
已解决CORS跨域时axios无法获取服务器自定义的header信息?! 先看代码: // 登录后的表单提交ajaxRegisterApi: function (form) { var key = l ...
Java番外篇2——jdk8新特性
Java番外篇2--jdk8新特性 1.Lambda 1.1.无参无返回值 public class Test {interface Print{void print();}public static ...
Java番外篇1——正则表达式
Java番外篇1--正则表达式 1.什么是正则表达式正则表达式定义了字符串的模式正则表达式可以用来搜索.编辑或处理文本正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别 2.正则表达式 ...
给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV
转载自:https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程:给深度学习入门者的Python快速教程 - 基础篇给深度学习入门者的Python快速教程 - ...
clang static analyzer源码分析（番外篇）：RegionStore以及evalCall()中的conservativeEvalCall
引子我们在上一篇文章<clang static analyzer源码分析(番外篇):evalCall()中的inline机制>中提及了clang如何创建CallGraph,如何进行函数i ...
项目看板开发经验分享(番外篇)——集团碳排放看板（万剑归宗）
集团碳排放看板展示视频为什么这期算作一个番外篇呢?因为这个看板里用到的所有开发思路都在前三期全部提到了,也有几个可复用的模块是直接照搬了过来,所以我在开发这个看板时只用了很短的工时就开发完了,算是给 ...
文本分类入门（番外篇）特征选择与特征权重计算的区别
文本分类入门(番外篇)特征选择与特征权重计算的区别在文本分类的过程中,特征(也可以简单的理解为"词")从人类能够理解的形式转换为计算机能够理解的形式时,实际上经过了两步骤的量化- ...
Java微信公众平台开发--番外篇，对GlobalConstants文件的补充
转自:http://www.cuiyongzhi.com/post/63.html 之前发过一个[微信开发]系列性的文章,也引来了不少朋友观看和点评交流,可能我在写文章时有所疏忽,对部分文件给出的不是 ...
你所能用到的数据结构之番外篇---逆袭的面向对象（一）
对于番外篇,我深刻能明白在大多数人眼里就和电视剧的广告一样,说实话,我也不喜欢这种感觉,因为这样会让人觉得是在欺骗消费者啊~~~阿西巴~~~但是我实在发现如果不在这里对面向对象来个入门级的介绍,后面的 ...

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

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

前言

1.创建自定义组件

2.导出自定义组件

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

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

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

最新文章

热门文章