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库还是自己写代码?
Jan 28 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 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
967 个函式
2006/10/09 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
Python+django实现简单的文件上传
2016/08/17 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
nohup的用法
2014/08/10 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
财务会计人员岗位职责
2013/11/30 职场文书
京剧自荐信
2014/01/26 职场文书
自行车广告词大全
2014/03/21 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers