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

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

求知的欲望，是不断学习的动力。路漫漫其修远兮，吾将上下而求索。欢迎加我QQ:2360263057一起讨论学习。