扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在开发和设计一个组件的时候有可能就会绕一个大圈子，所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解。
创新互联自2013年起，是专业互联网技术服务公司，拥有项目成都网站制作、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元山阴做网站,已为上家服务,为山阴各地企业和个人服务,联系电话:028-86922220
举个例子，通知组件notification基本是现代web开发标配，在很多地方都能用到。而在以Vue作为核心框架的前端项目中，因为Vue本身是一个组件化和虚拟Dom的框架，要实现一个通知组件的展示当然是非常简单的。但因为通知组件的使用特性，直接在模板当中书写组件并通过v-show或者props控制通知组件的显示显然是非常不方便的，而且如果要在action或者其他非组件场景中要用到通知，那么纯组件模式的用法也无法实现。那么有没有办法即用到Vue组件化特性方便得实现一个通知组件的展现，又能够通过一个简单的方法调用就能显示通知呢？本文就是来讲述这个实现方法的。
目标
实现一个Vue的通知组件，可以直接在组件内调用
通过方法调用，比如Vue.$notify({...options})来调用通知组件
结合上述两种方式，复用代码
实现通知组件
这一步非常的简单，我相信做过一点Vue开发的同学都能写出一个像模像样的通知组件，在这里就不赘述，直接上代码
在这里需要注意，我们定义了一个叫做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 + 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的时候注意以下两个点：
通过方法调用该组件
最后我们需要做的就是通过方法调用这个已经继承过的组件了，我们先来看一下源码的实现：
// 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技术点有如下几点：
Vue拥有非常多的API，如果在使用Vue之前没有系统的学习过Vue的核心知识和API，你可能压根就不知道有这样的实现方式，所以想要学好Vue，系统得对Vue的核心进行学习是非常重要的一个环节。
以上所述是小编给大家介绍的你不知道的Vue技巧之--开发一个可以通过方法调用的组件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网