为什么要打包组件？

封装的目的是更方便快捷地开发业务功能。组件是vue最强大的功能之一，可以实现一些相似功能的重用，并与其他业务逻辑解耦。在开发过程中，我们不可避免地会写很多类似的、重复的代码。有时两个业务模块功能相似，很容易复制粘贴。但是，如果涉及到的领域有一些小的差异，你就会感到烦恼。毕竟，你必须从头到尾观察和改变它们。此时，如果将那些相同的功能抽象分离成组件，使用组件引用会特别方便。

如何在Vue中打包自己的组件

要封装一个组件，必须掌握三个技巧：1。父组件将值传递给子组件(道具)；2.子组件将值传递给父组件($ emit)；3.插槽使用。对于一个独立的组件，使用props向组件注入核心内容；$emit用于通过一些操作将这个组件集成到其他组件中。

如果使用Vue进行开发，必须使用vue-cli作为支架，使用element-ui作为著名的前端框架。本文使用vue-cli介绍如何封装自己的组件。让我们以稍后将介绍的打包组件为例向您介绍：

1.首先可以看到前端项目下有一个components目录，在components下新建一个文件夹xx-button，然后在xx-button下新建一个index.vue文件，如图：

2.然后在index.vue中编写自己的代码为了标准化，要注意代码中的名字叫做XxButton，将来要用到的组件是XxButton:

模板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 '，//注意这里的名称。也就是说，组件名prop : { buttons : { type : array，required:true}}/script3。然后在组件下有一个index.js文件。我们需要在index.js中注册我们自己定义的组件：

从'导入xx按钮。/xx-button ' vue.component(xxbutton . name，xxbutton)如图所示：

注意：这个index.js也必须引入main.js，否则不能使用。当然也可以直接在main.js中注册组件，为了方便组件的统一管理，在组件下构建了一个index.js，统一注册组件。

4.最后，在页面开发中，我们可以愉快地使用我们注册的组件。

按钮定义如下：

元素-ui组件的进一步封装介绍

以上是关于如何打包自己的组件的简单演示介绍。下面，我将介绍一下我工作中经常用到的组件的打包，主要集中在element-ui的二次打包。从简单到深入，我先介绍一些简单的组件，比如按钮组件打包、分页组件打包、详情页打包、对话框打包，然后把Form表单和simple表单打包。最后，我将打包一个与之前打包的组件相结合的全功能组件。当然，在实际开发中，并不是所有的业务功能都与组件功能完全兼容，这就需要组件有更多的可扩展性。后续内容还将介绍如何在组件封装过程中提高可扩展性。

以上就是边肖是如何包装Vuelelement-UI的，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！

版权声明：详细解释Vuelelement-UI如何封装自己的组件是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。