方法和属性的定义是直接覆盖的
生命周期方法类似余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'
