vue组件挂载到全局方法的示例代码

发布时间：2020-12-17 02:15:31 所属栏目：百科来源：网络整理

导读：在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用

在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。以bootstrap-vue中的Alert组件为例，分一下几步进行：

1、定义一个vue文件实现对原组件的再次封装

main.vue

这里主要就是对组件参数、回调事件的一些处理，与其他处理组件的情况没有什么区别

2、定义一个js文件挂载到Vue上，并和我们定义的组件进行交互

index.js

{ Object.defineProperty(Vue.prototype,'$alert',{ get () { let id = 'message_' + seed++ const alertMsg = options => { instance = new AlertConstructor({ propsData: options }) index++ instance.id = id instance.vm = instance.$mount() document.body.appendChild(instance.vm.$el) instance.vm.$el.style.zIndex = index return instance.vm } return alertMsg } }) } export default install

其主要思想是通过调用这个方法给组件传值，然后append到body下

3、最后需要在main.js中use一下

4、使用

5、confrim的封装也是一样的

main.vue

index.js

{ Object.defineProperty(Vue.prototype,'$confirm',{ get () { let id = 'message_' + seed++ const confirmMsg = options => { instance = new ConfirmConstructor({ propsData: options }) index++ instance.id = id instance.vm = instance.$mount() document.body.appendChild(instance.vm.$el) instance.vm.$el.style.zIndex = index return instance.vm } return confirmMsg } }) } export default install

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!