你不知道的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>

在这里需要注意，我们定义了一个叫做style的computed属性，三个方法cleartimer,createtimer,setheight，但他们的内容都是空的，虽然在模板上有用到，但是似乎没什么意义，在后面我们要扩展组件的时候我会讲到为什么要这么做。

创建完这个组件之后，我们就可以在模板中使用了<notification btn="xxx" content="xxx" />

实现通过方法调用该通知组件

继承组件

在实现通过方法调用之前，我们需要扩展一下这个组件，因为仅仅这些属性，并不够我们使用。在使用方法调用的时候，我们需要考虑一下几个问题：

1. 显示通知的定位
2. 组件的出现和自动消失控制
3. 连续多次调用通知方法，如何排版多个通知

在这个前提下，我们需要扩展该组件，但是扩展的这些属性不能直接放在原组件内，因为这些可能会影响组件在模板内的使用，那怎么办呢？这时候我们就要用到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的时候注意以下两个点：

1. 方法和属性的定义是直接覆盖的
2. 生命周期方法类似余mixin，会合并，也就是原组件和继承之后的组件都会被调用，原组件先调用

通过方法调用该组件

最后我们需要做的就是通过方法调用这个已经继承过的组件了，我们先来看一下源码的实现：

// function-component.js
import vue from 'vue'
import component from './fun-component'
const notificationconstructor = vue.extend(component)

const instances = []
let seed = 1

const removeinstance = (instance) => {
 const len = instances.length
 if (!instance) return
 const index = instances.findindex(inst => instance.id === inst.id)

 instances.splice(index, 1)

 if (len <= 1) return
 const removedheight = instance.vm.height
 for (let i = index; i < len - 1; i++) {
  instances[i].verticaloffset =
   parseint(instances[i].verticaloffset) - removedheight - 16
 }
}

const notify = function (options) {
 const {
  onclose,
  ...rest
 } = options
 if (vue.prototype.$isserver) return
 options = options || {}
 const id = `notification_${seed++}`

 const instance = new notificationconstructor({
  propsdata: {
   ...rest
  }
 })

 instance.id = id
 instance.vm = instance.$mount()
 document.body.appendchild(instance.vm.$el)
 instance.vm.visible = true

 let verticaloffset = 0
 instances.foreach(item => {
  verticaloffset += item.$el.offsetheight + 16
 })
 verticaloffset += 16
 instance.verticaloffset = verticaloffset
 instances.push(instance)
 instance.vm.$on('closed', () => {
  if (typeof onclose === 'function') {
   onclose(instance)
  }
  removeinstance(instance)
  instance.vm.$destroy()
 })
 return instance.vm
}

export default notify

首先通过const notificationconstructor = vue.extend(component)，我们得到了一个类似于vue的子类，我们就可以通过new notificationconstructor({...options})的方式去创建vue的实例了，同时通过该方式创建的实例，是有组件定义里面的所有属性的。

在创建实例之后，可以通过instance.$mount()手动将组件挂载到dom上面，这样我们可以不依赖vue组件树来输出dom片段，达到自由显示通知的效果。

这中间的实现主要就是维护一个通知数组，在创建时推入，在消失时删除，这个过程并没有规定一定要如此实现，我就不赘述，以免限制大家的思路，大家可以根据自己的想法去实现。

使用该方法

要使用这个通知方法非常简单，我们可以直接import这个文件来使用，比如：

import notify from './function-component.js'

notify({
 content: 'xxx',
 btn: 'xxx'
})

当然我们很多场景是在组件内部调用，为了方便在组件内使用，不需要每次都import，我们可以把这个方法包装成一个vue的插件。我们创建一个index.js，内容如下：

import notification from './notification.vue'
import notify from './function'

export default (vue) => {
 vue.component(notification.name, notification)
 vue.prototype.$notify = notify
 vue.notify = notify
}

然后在项目内，我们可以通过:

import notify from '/path/to/notification/module'

vue.use(notify)

这样之后，在组件内就可以直接通过this.$notify({...options})来调用通知了，同时还可以通过vue.notify({...options})在其他环境下调用，大家可以在自己的项目中尝试一下。

总结

到这里，关于如何实现通过方法调用一个vue组件内容就差不多了。在这里我们涉及到的vue技术点有如下几点：

1. 通过extend配置进行组件的扩展
2. 通过vue.extend创建一个vue的子类，用来动态创建vue实例
3. 通过vue实例主动将组件内容挂载到dom

vue拥有非常多的api，如果在使用vue之前没有系统的学习过vue的核心知识和api，你可能压根就不知道有这样的实现方式，所以想要学好vue，系统得对vue的核心进行学习是非常重要的一个环节。

以上所述是小编给大家介绍的你不知道的vue技巧之--开发一个可以通过方法调用的组件详解整合，希望对大家有所帮助