vue組件掛載到全局方法

aboutU 發布于2019-08-23 10:35 / 1999人閱讀

摘要：在最近的項目中，使用了來開發，然而在實際的開發過程中卻發現這個提供的組件并不能打到我們預期的效果，像等組件每個頁面引入就得重復引入，并不像那樣可以通過來調用，那么問題來了，如何通過來調用起我們定義的組件或對我們所使用的框架的組件呢。

在最近的項目中，使用了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輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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