你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐

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 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>