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 name="fade" @after-leave="afterLeave" @after-enter="setHeight">
<div
v-show="visible"
:class="['notification']"
:style="style"
@mouseenter="clearTimer"
@mouseleave="createTimer"
>
<span class="content">{{content}}</span>
<a class="btn" @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
