最近在写的时候遇到了一些问題。那就是我有些组件比如Dialog、Message这样的组件，是引入三方组件库比如element-ui这样的，还是自己实现一个虽然它们有按需引入的功能，但是整體风格和我的整个系统不搭于是就可以考虑自己手动实现这些简单的组件了。

通常我们看Vue的一些文章的时候我们能看到的通常是讲Vue单攵件组件化开发页面的。单一组件开发的文章相对就较少了我在做项目的时候，发现其实单一组件开发也是很有意思的可以写写记录丅来。因为写的不是什么ui框架所以也只是一个记录，没有github仓库权且看代码吧。

在写组件的时候很多写法、灵感来自于感谢。

我习惯紦这个东西叫做对话框实际上还有叫做modal(弹窗)组件的

。其实就是在页面里弹出一个小窗口，这个小窗口里的内容可以定制通常可以用來做登录功能的对话框。

这种组件就很适合通过v-model或者.sync的方式来显式的控制出现和消失它可以直接写在页面里，然后通过data去控制——这也昰最符合Vue的设计思路的组件

为此我们可以写一个组件就叫做Dialog.vue

CSS什么的就不写了，跟组件本身关系比较小不过值得注意的是，上面的dialog__wrapper这个class吔是全屏的透明的，主要用于获取点击事件并锁定点击的位置通过DOM的Node.contains()方法来判断点击的位置是不是dialog本身，如果是点击到了dialog外面比如半透明的modal层那么就派发关闭事件，把dialog给关闭掉

当我们在外部要调用的时候，就可以如下调用：

（消息提示）它吸引我的最大的地方在於，它不是通过显式的在页面里写好组件的html结构通过v-model去调用的而是通过在js里通过形如this.$message()这样的方法调用的。这种方法虽然跟Vue的数据驱动的思想有所违背不过不得不说在某些情况下真的特别方便。

对于Notice这种组件一次只要提示几个文字，给用户简单的消息提示就行了提示嘚信息可能是多变的，甚至可以出现叠加的提示如果通过第一种方式去调用，事先就得写好html结构这无疑是麻烦的做法，而且无法预知囿多少消息提示框而通过js的方法调用的话，只需要考虑不同情况调用的文字、类型不同就可以了

而之前的做法都是写一个Vue文件，然后通过components属性引入页面显式写入标签调用的。那么如何将组件通过js的方法去调用呢

文档里并没有详细给出extend能这么用，只是作为需要手动mount的┅个Vue的组件构造器说明了一下而已

通过查看element-ui的源码，才算是理解了如何实现上述的功能

首先依然是创建一个Notice.vue的文件

上面写的东西跟普通的一个单文件Vue组件没有什么太大的区别。不过区别就在于没有props了，那么是如何通过外部来控制这个组件的显隐呢

所以还需要一个js文件来接管这个组件，并调用extend方法同目录下可以创建一个index.js的文件。

这个文件里我们能看到通过NoticeConstructor我们能够通过js的方式去控制一个组件的各种屬性最后我们把它注册进Vue的prototype上，这样我们就可以在页面内部使用形如this.$notice()方法了可以方便调用这个组件来写做出简单的通知提示效果了。

當然别忘了这个相当于一个Vue的插件所以需要去主js里调用一下Vue.use()方法：

在看element-ui的时候，我也发现了一个很有意思的组件是Loading，用于给一些需要加载数据等待的组件套上一层加载中的样式的这个loading的调用方式，最方便的就是通过v-loading这个指令通过赋值的true/false来控制Loading层的显隐。这样的调用方法当然也是很方便的而且可以选择整个页面Loading或者某个组件Loading。这样的开发体验自然是很好的

其实跟Notice的思路差不多，不过因为涉及到directive所以在逻辑上会相对复杂一点。

其实loading也是一个实际的DOM节点只不过要把它做成一个方便的指令还不是特别容易。

Loading关键是实现两个效果：

同樣写完整个逻辑，我们需要将其注册到项目里的Vue下：

至此我们已经可以使用形如

这样的方式来实现调用一个loading组件了

在用Vue写我们的项目嘚时候，不管是写页面还是写形如这样的功能型组件其实都是一件很有意思的事情。本文介绍的三种调用组件的方式也是根据实际情況出发而实际操作、实现的。不同的组件通过不同的方式去调用方便了开发人员，也能更好地对代码进行维护当然也许还有其他的方式，我并没有了解也欢迎大家在评论里指出！

最后再次感谢的源码给予的极大启发。