vue组件挂载到全局方法

aboutU 发布于2019-08-23 10:35 / 1964人阅读

摘要：在最近的项目中，使用了来开发，然而在实际的开发过程中却发现这个提供的组件并不能打到我们预期的效果，像等组件每个页面引入就得重复引入，并不像那样可以通过来调用，那么问题来了，如何通过来调用起我们定义的组件或对我们所使用的框架的组件呢。

在最近的项目中，使用了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一起讨论学习。

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96488.html

Vue组件之全局组件与局部组件

摘要：组件是最强大的功能之一。全局组件注册方式组件名方法我是全局组件渲染结果我是全局组件我是全局组件这里需要注意全局组件必须写在实例创建之前，才在该根元素下面生效我是全局组件这样只会渲染根元素下面的，并不会渲染根元素下面的，并且会报错。组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.j...

codeKK 2019-08-01 17:44 评论0 收藏0
Vue组件之全局组件与局部组件

摘要：组件是最强大的功能之一。全局组件注册方式组件名方法我是全局组件渲染结果我是全局组件我是全局组件这里需要注意全局组件必须写在实例创建之前，才在该根元素下面生效我是全局组件这样只会渲染根元素下面的，并不会渲染根元素下面的，并且会报错。组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.j...

qingshanli1988 2019-08-21 16:54 评论0 收藏0
Vue组件之全局组件与局部组件

摘要：组件是最强大的功能之一。全局组件注册方式组件名方法我是全局组件渲染结果我是全局组件我是全局组件这里需要注意全局组件必须写在实例创建之前，才在该根元素下面生效我是全局组件这样只会渲染根元素下面的，并不会渲染根元素下面的，并且会报错。组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.j...

rickchen 2019-08-30 15:53 评论0 收藏0
Vue.extend用法（主要用于需要动态渲染的组件，或者类似于window.alert() 提示

摘要：一简单的使用主要用于需要动态渲染的组件，或者类似于提示组件注意创建的是一个组件构造器，而不是一个具体的组件实例属于的全局，在实际业务开发中我们很少使用，因为相比常用的写法使用步骤要更加繁琐一些。最近在重构公司的项目，有些组件想要封装的更灵活，例如toast、loading、messageBox等弹窗组件，模仿了mint-ui封装此类组件的方式封装了自己的弹窗组件； mint-UI的t...

masturbator 2019-08-23 18:35 评论0 收藏0
Vue源码学习（二）——从宏观看Vue

摘要：上一篇文章我们写到从入口文件一步步找到的构造函数，现在我们要去看看实例化经历的过程的构造函数我们知道的构造函数在中不明白的可以去看上一篇文章源码学习笔记一。上一篇文章我们写到从入口文件一步步找到Vue的构造函数，现在我们要去看看Vue实例化经历的过程 Vue的构造函数我们知道Vue的构造函数在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue...

AndroidTraveler 2019-08-23 13:59 评论0 收藏0