怎么在将vue组件挂载到全局

这篇文章给大家介绍怎么在将vue组件挂载到全局，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

为吴兴等地区用户提供了全套网页设计制作服务，及吴兴网站建设行业解决方案。主营业务为网站制作、成都做网站、吴兴网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

main.vue

.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 = index
    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

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组件挂载到全局就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。