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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
JavaScript获得选中文本内容的方法
Dec 02 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
javascript打开word文档的方法
Apr 16 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
了解Javascript的模块化开发
2015/03/02 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
python中plot实现即时数据动态显示方法
2018/06/22 Python
python实现简单井字棋小游戏
2020/03/05 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
学籍证明模板
2014/11/21 职场文书
同事打架检讨书
2015/05/06 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis