微客导航 » 文章资讯 » Vue组件化开发之通用型弹出框的实现

Vue组件化开发之通用型弹出框的实现

2023-07-31 10:51:04 162

本文主要分享关于组件化开发的理解，让刚入门的小伙伴少走一些弯路，提高开发效率，作者本人也是新手，如有不当之处，请大佬指出，感谢。

相信很多刚入门的小伙伴，经常会写很多重复的代码，而这些代码一般情况下也都是大同小异，在这种情况下，如何让开发和学习变得更加高效，组件化的思想就显得尤为重要。这里通过设计一个简单的弹出框，给小伙伴们分享组件化的应用。

组件&组件化

组件化是对某些可以进行复用的功能进行封装的标准化工作。组件一般会内含自身的内部UI元素、样式和JS逻辑代码，它可以很方便的在应用的任何地方进行快速的嵌入。组件内部可以使用其他组件来构成更复杂的组件。

在实际的开发中，我们应该避免去编写重复的代码，将精力放在更加核心的部分，因此就需要将这些重复的代码抽取出来，封装成公共的组件，提高开发效率，但同时也要注意组件的健壮性和可复用性，让它能够尽可能适应更多的场景。

基本结构

首先是弹出框的基本结构

标题

确定取消

基本结构很简单，稍微注意一点的就是 slot插槽，如果没有提供name属性，它将有一个隐含的名字default，并且在父组件如果没有指定 slot的 v-slot属性的话，内容会传给default插槽。

在这里定义了 slot的name属性 body，这种的叫做具名插槽，会匹配 v-slot:body的内容。