这篇文章主要介绍了vue组件挂载到全局方法的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。
以bootstrap-vue中的Alert组件为例，分一下几步进行：
1、定义一个vue文件实现对原组件的再次封装
main.vue
{{msg}} .alert-wrap { position: fixed; width: 600px; top: 80px; left: 50%; margin-left: -200px; z-index: 2000; font-size: 1.5rem; }
这里主要就是对组件参数、回调事件的一些处理，与其他处理组件的情况没有什么区别
2、定义一个js文件挂载到Vue上，并和我们定义的组件进行交互
index.js
import Alert from './main.vue' import Vue from 'vue' let AlertConstructor = Vue.extend(Alert) let instance let seed = 1 let index = 2000 const install = () => { 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 = ind<em style="color:transparent">本文来源gao.dai.ma.com搞@代*码#网</em>ex return instance.vm } return alertMsg } }) } export default install
其主要思想是通过调用这个方法给组件传值，然后append到body下
3、最后需要在main.js中use一下
import Alert from '@/components/alert/index' Vue.use(Alert)
4、使用
this.$alert({msg: '欢迎━(*｀∀´*)ノ亻!'})
5、confrim的封装也是一样的
main.vue
<p class="my-4">{{msg}}</p>
index.js
import Confirm from './main.vue' import Vue from 'vue' let ConfirmConstructor = Vue.extend(Confirm) let instance let seed = 1 let index = 1000 const install = () => { 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
以上就是vue组件挂载到全局方法的示例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue组件挂载到全局方法的示例代码
转载请注明原文链接：vue组件挂载到全局方法的示例代码
