Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在开发和设计一个组件的时候有可能就会绕一个大圈子，所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解。
举个例子，通知组件notification基本是现代web开发标配，在很多地方都能用到。而在以Vue作为核心框架的前端项目中，因为Vue本身是一个组件化和虚拟Dom的框架，要实现一个通知组件的展示当然是非常简单的。但因为通知组件的使用特性，直接在模板当中书写组件并通过v-show或者props控制通知组件的显示显然是非常不方便的，而且如果要在action或者其他非组件场景中要用到通知，那么纯组件模式的用法也无法实现。那么有没有办法即用到Vue组件化特性方便得实现一个通知组件的展现，又能够通过一个简单的方法调用就能显示通知呢？本文就是来讲述这个实现方法的。
目标
实现一个Vue的通知组件，可以直接在组件内调用
通过方法调用，比如Vue.$notify({...options})来调用通知组件
结合上述两种方式，复用代码
实现通知组件
这一步非常的简单，我相信做过一点Vue开发的同学都能写出一个像模像样的通知组件，在这里就不赘述，直接上代码
<template> <transition @after-leave="afterLeave" @after-enter="setHeight"> <div v-show="visible" :class="['notification']" :style="style" @mouseenter="clearTimer" @mouseleave="createTimer" > <span>{{content}}</span> <a @click="handleClose">{{btn || '关闭'}}</a> </div> </transition> </template> <script> export default { name: 'Notification', props: { content: { type: String, default: '' }, btn: { type: String, default: '' } }, data () { return { visible: true } }, computed: { style () { return {} } }, methods: { handleClose (e) { e.preventDefault() this.doClose() }, doClose () { this.visible = false this.$emit('close') }, afterLeave () { this.$emit('closed') }, clearTimer () {}, createTimer () {}, setHeight () {} } } </script>
<style lang="stylus" scoped> .notification display: flex background-color #303030 color rgba(255, 255, 255, 1) align-items center padding 20px position fixed min-width 280px box-shadow 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12) flex-wrap wrap transition all .3s .content padding 0 .btn color #ff4081 padding-left 24px margin-left auto cursor pointer </style>
在这里需要注意，我们定义了一个叫做style的computed属性，三个方法clearTimer,createTimer,setHeight，但他们的内容都是空的，虽然在模板上有用到，但是似乎没什么意义，在后面我们要扩展组件的时候我会讲到为什么要这么做。
创建完这个组件之后，我们就可以在模板中使用了<notification btn="xxx" content="xxx" />
实现通过方法调用该通知组件
继承组件
在实现通过方法调用之前，我们需要扩展一下这个组件，因为仅仅这些属性，并不够我们使用。在使用方法调用的时候，我们需要考虑一下几个问题：
显示通知的定位
组件的出现和自动消失控制
连续多次调用通知方法，如何排版多个通知
在这个前提下，我们需要扩展该组件，但是扩展的这些属性不能直接放在原组件内，因为这些可能会影响组件在模板内的使用，那怎么办呢？这时候我们就要用到Vue里面非常好用的一个API，extend，通过他去继承原组件的属性并扩展他。
我们先来看代码，创建一个叫做fun-notification.js的文件，内容如下：
import Notification from './notification.vue' export default { extends: Notification, computed: { style () { return { position: 'fixed', right: '20px', bottom: `${this.verticalOffset + 20}px` } } }, data () { return { verticalOffset: 0, visible: false, height: 0, autoClose: 3000 } }, mounted () { this.createTimer() }, methods: { createTimer () { if (this.autoClose) { this.timer = setTimeout(() => { this.doClose() }, this.autoClose) } }, clearTimer () { if (this.timer) { clearTimeout(this.timer) } }, setHeight () { this.height = this.$el.offsetHeight } } }
我们可以看到之前空实现的几个方法在这里被实现了，那么为什么要在原组件上面加上那些方法的定义呢？因为需要在模板上绑定，而模板是无法extend的，只能覆盖，如果要覆盖重新实现，那扩展的意义就不是很大了。当然同学们可以自己抉择。
在使用extend的时候注意以下两个点：
方法和属性的定义是直接覆盖的
生命周期方法类似余mixin，会合并，也就是原组件和继承之后的组件都会被调用，原组件先调用
通过方法调用该组件
最后我们需要做的就是通过方法调用这个已经继承过的组件了，我们先来看一下源码的实现：