vue element-ui之如何封装一个自己的组件

发布时间:2021-05-17 13:50:43 作者:小新
来源:亿速云 阅读:1255

这篇文章给大家分享的是有关vue element-ui之如何封装一个自己的组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

为什么要进行组件封装?

封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件(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

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

感谢各位的阅读!关于“vue element-ui之如何封装一个自己的组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 源码时代前端干货分享|从零动手封装一个通用的vue按钮组件
  2. 正确姿势开发vue后台管理系统

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue elementui

上一篇:如何优化SQL

下一篇:Linux自带的录屏工具如何录制gif图

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》