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 相关文章推荐
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
js重写方法的简单实现
Jul 10 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
一文搞懂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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python3处理word文档实例分析
2020/12/01 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
公益广告语集锦
2014/03/13 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
我的画教学反思
2014/04/28 职场文书
新文化运动的口号
2014/06/21 职场文书
力学专业求职信
2014/07/23 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
旷课检讨书500字
2014/10/14 职场文书
小学家长意见怎么写
2015/06/03 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
python lambda 表达式形式分析
2022/04/03 Python