// 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技术点有如下几点：
通过extend配置进行组件的扩展
通过Vue.extend创建一个Vue的子类，用来动态创建Vue实例
通过Vue实例主动将组件内容挂载到DOM
Vue拥有非常多的API，如果在使用Vue之前没有系统的学习过Vue的核心知识和API，你可能压根就不知道有这样的实现方式，所以想要学好Vue，系统得对Vue的核心进行学习是非常重要的一个环节。
以上所述是小编给大家介绍的你不知道的Vue技巧之--开发一个可以通过方法调用的组件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: