【你不知道的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开发的同学都能写出一个像模像样的通知组件，在这里就不赘述，直接上代码

<transition

name

"fade"

after-leave

"afterLeave"

after-enter

"setHeight"

<div

v-show

"visible"

class

"["notification"]"

:style=

"style"

mouseenter

"clearTimer"

mouseleave

"createTimer"

<span

class

"content"

</span>

class

"btn"

click

"handleClose"

</a>

</div>

</transition>

</template>

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

)

align-items center

padding

20px

position

fixed

min-width

280px

box-shadow

0px

3px

5px

1px

rgba(

0.2

0px

6px

10px

0px

rgba(

0.14

0px

1px

18px

0px

rgba(

0.12

)

flex-wrap wrap

transition all .

.content

padding

.btn

color

#ff4081

padding-left

24px

margin-left

auto

cursor pointer

</style>

在这里需要注意，我们定义了一个叫做

style

的computed属性，三个方法

clearTimer,createTimer,setHeight

，但他们的内容都是空的，虽然在模板上有用到，但是似乎没什么意义，在后面我们要扩展组件的时候我会讲到为什么要这么做。

创建完这个组件之后，我们就可以在模板中使用了

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

继承组件

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

显示通知的定位

组件的出现和自动消失控制

连续多次调用通知方法，如何排版多个通知

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

}px`

}

data () {

return

{

verticalOffset:

visible:

false

height:

autoClose:

3000

}

mounted () {

this

.createTimer()

methods: {

createTimer () {

(

this

.autoClose) {

this

.timer = setTimeout(() => {

this

.doClose()

this

.autoClose)

}

clearTimer () {

(

this

.timer) {

clearTimeout(

this

.timer)

}

setHeight () {

this

.height =

this

.$el.offsetHeight

}

我们可以看到之前空实现的几个方法在这里被实现了，那么为什么要在原组件上面加上那些方法的定义呢？因为需要在模板上绑定，而模板是无法extend的，只能覆盖，如果要覆盖重新实现，那扩展的意义就不是很大了。当然同学们可以自己抉择。

在使用extend的时候注意以下两个点：

方法和属性的定义是直接覆盖的

生命周期方法类似余mixin，会合并，也就是原组件和继承之后的组件都会被调用，原组件先调用

通过方法调用该组件

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

// function-component.js

import

Vue

from

"vue"

import

Component

from

"./fun-component"

const

NotificationConstructor

Vue

.extend(

Component

)

const

instances = []

let seed =

const

removeInstance = (instance) => {

const

len = instances.length

(!instance)

return

const

index = instances.findIndex(inst => instance.id === inst.id)

instances.splice(index,

)

(len <=

)

return

const

removedHeight = instance.vm.height

for

(let i = index; i < len -

; i++) {

instances[i].verticalOffset =

parseInt(instances[i].verticalOffset) - removedHeight -

}

const

notify =

function

(options) {

const

{

onClose,

...rest

} = options

(

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 =

instances.forEach(item => {

verticalOffset += item.$el.offsetHeight +

})

verticalOffset +=

instance.verticalOffset = verticalOffset

instances.push(instance)

instance.vm.$on(

"closed"

, () => {

(

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技术点有如下几点：

通过extend配置进行组件的扩展

通过Vue.extend创建一个Vue的子类，用来动态创建Vue实例

通过Vue实例主动将组件内容挂载到DOM

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

以上的内容来源于我的新课

《Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲》

，在这门课中我非常成体系得安排课程，从Vue的核心知识，到Vue+Webpack项目工程搭建，再到Vue全家桶的整合，以及Vue的服务端渲染，都非常全面深入得进行讲解。

如果你看了这篇文章有兴趣把Vue学得更深入，非常欢迎你报名学习，我相信我的课程能让你学到非常全面的Vue开发知识。

点击下图，即可报名学习

慕课网imooc

IT技能平台，程序员的梦工厂

长按二维码关注