vue element-ui之怎么封装一个自己的组件的详解


Posted in Javascript onMay 20, 2019

为什么要进行组件封装?

封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件(component)是vue的最强大功能之一,组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中,我们难免会写很多类似的、重复的代码,有时候两个业务模块有相似的功能,采用复制粘贴已经很省事,但如果涉及的字段或有一些小差别,你也会觉得很烦,毕竟你要从头到尾瞅着去改动。这时候如果把那些相同的功能,抽象出来抽离成组件,通过组件引用方式就会显得格外省事了。

Vue中怎么封装一个自己的组件

想要封装好一个组件,必须要熟练掌握的三个技能:1.父组件传值到子组件(props) 2.子组件传值到父组件($emit)3.插槽使用(slot)。对于一个独立的组件,props是用来为组件内部注入核心内容;$emit用来使这个组件通过一些操作来融入其它组件中。

使用Vue做开发,想必你一定会使用vue-cli这个脚手架,同时想必你一定会使用element-ui这个大名鼎鼎的前端框架。本文就以vue-cli来介绍一下怎么封装自己的组件。下面就以后续要介绍的一个封装的组件为例,来为大家介绍:

1.首先,可以看到前端工程下有一个components目录,在components下新建一个文件夹xx-button,再在xx-button下创建一个index.vue文件,如图:

vue element-ui之怎么封装一个自己的组件的详解vue element-ui之怎么封装一个自己的组件的详解

2.然后在index.vue中写自己的代码。为了规范,注意代码中的name命名XxButton,以后使用的组件就是XxButton:

<template>
 <el-button-group>
  <el-button v-for="(btn,index) in this.buttons" :key="index" :type="btn.type ? btn.type:'primary'"
   :icon="btn.icon" :size="btn.size?btn.size:'mini'" @click="btn.click">{{btn.label}}</el-button>
 </el-button-group>
</template>
 
<script>
export default {
 name: 'XxButton', // 注意这里的name命名,就是你以后封装好后使用的组件名
 props: {
  buttons: {
   type: Array,
   required: true
  }
 }
}
</script>

3.然后在components下还有一个index.js文件,咱们要在index.js中注册上自己定义的组件:

import XxButton from './xx-button'
 
Vue.component(XxButton.name, XxButton)

如图所示:

vue element-ui之怎么封装一个自己的组件的详解

注意:这个index.js也一定要在main.js中引入,不然就无法使用。当然,你也可以直接在main.js中直接注册组件,这里为了便于组件的统一管理,就在components下建了一个index.js来统一注册组件。

vue element-ui之怎么封装一个自己的组件的详解

4.最后,在页面开发中,就可以愉快的使用我们注册的组件啦。

vue element-ui之怎么封装一个自己的组件的详解

this.buttons的定义如下:

vue element-ui之怎么封装一个自己的组件的详解

对element-ui组件进一步封装介绍

以上是对怎么封装自己的组件做了一个简单的demo介绍,后续我将会对工作中经常使用的组件进行封装介绍,主要针对element-ui做二次封装,由浅入深,先介绍一些简单的比如:按钮组件封装、分页组件封装、详情页面封装、Dialog对话框封装,然后对Form表单封装、简单表格封装,最后结合前面封装的组件再封装一个功能齐全的组件。当然在实际开发中,并不是所有的业务功能完全与组件功能契合,这就需要组件具有更多的扩展性,后续的内容中也会对组件封装过程中怎么提高扩展性做介绍。

以上所述是小编给大家介绍的vue element-ui之怎么封装一个自己的组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
一文搞懂ES6中的Map和Set
May 20 #Javascript
详解vue 在移动端体验上的优化解决方案
May 20 #Javascript
vue-i18n结合Element-ui的配置方法
May 20 #Javascript
JS实现选项卡效果的代码实例
May 20 #Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 #Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 #Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 #Javascript
You might like
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
YII框架关联查询操作示例
2019/04/29 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
几个高效,简洁的字符处理函数
2007/04/12 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python按照多个条件排序的方法
2019/02/08 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
python推导式的使用方法实例
2021/02/28 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
户籍证明的格式
2014/01/13 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
大三学习计划书范文
2014/05/02 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
一文带你探究MySQL中的NULL
2021/11/11 MySQL