这篇文章给大家介绍的内容是关于vue组件如何挂载到全局？vue组件挂载到全局的方法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。
以bootstrap-vue中的Alert组件为例，分一下几步进行：
1、定义一个vue文件实现对原组件的再次封装
main.vue
这里主要就是对组件参数、回调事件的一些处理，与其他处理组件的情况没有什么区别
2、定义一个js文件挂载到Vue上，并和我们定义的组件进行交互
index.js
其主要思想是通过调用这个方法给组件传值，然后append到body下
3、最后需要在main.js中use一下
4、使用
5、confrim的封装也是一样的
main.vue
index.js
相关文章推荐：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
Vue+Mock.js实现模拟表格增删改查详细步骤
Vue中子组件怎么获取父组件的值？（props实现）
{{msg}}
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 = index
return instance.vm
}
return alertMsg
}
})
}
export default installimport Alert from '@/components/alert/index'
Vue.use(Alert)this.$alert({msg: '欢迎━(*｀∀´*)ノ亻!'})
{{msg}}
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