如何封装Vue Element-UI自定义组件更高效？

本文共计998个文字，预计阅读时间需要4分钟。

为什么要进行组件封装？封装的目的就是为了能够更方便、快速地开发业务功能。组件（component）是Vue的强大功能之一，它能够实现一些类似功能的复用，以及与其他业务逻辑的分离。

为什么要进行组件封装？

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

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

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

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