成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue組件掛載到全局方法

aboutU / 2011人閱讀

摘要：在最近的項(xiàng)目中，使用了來(lái)開(kāi)發(fā)，然而在實(shí)際的開(kāi)發(fā)過(guò)程中卻發(fā)現(xiàn)這個(gè)提供的組件并不能打到我們預(yù)期的效果，像等組件每個(gè)頁(yè)面引入就得重復(fù)引入，并不像那樣可以通過(guò)來(lái)調(diào)用，那么問(wèn)題來(lái)了，如何通過(guò)來(lái)調(diào)用起我們定義的組件或?qū)ξ覀兯褂玫目蚣艿慕M件呢。

在最近的項(xiàng)目中，使用了bootstrap-vue來(lái)開(kāi)發(fā)，然而在實(shí)際的開(kāi)發(fā)過(guò)程中卻發(fā)現(xiàn)這個(gè)UI提供的組件并不能打到我們預(yù)期的效果，像alert、modal等組件每個(gè)頁(yè)面引入就得重復(fù)引入，并不像element那樣可以通過(guò)this.$xxx來(lái)調(diào)用，那么問(wèn)題來(lái)了，如何通過(guò)this.$xxx來(lái)調(diào)用起我們定義的組件或?qū)ξ覀兯褂玫腢I框架的組件呢。
以bootstrap-vue中的Alert組件為例，分一下幾步進(jìn)行：

1、定義一個(gè)vue文件實(shí)現(xiàn)對(duì)原組件的再次封裝
main.vue

這里主要就是對(duì)組件參數(shù)、回調(diào)事件的一些處理，與其他處理組件的情況沒(méi)有什么區(qū)別

2、定義一個(gè)js文件掛載到Vue上，并和我們定義的組件進(jìn)行交互
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

其主要思想是通過(guò)調(diào)用這個(gè)方法給組件傳值，然后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

求知的欲望，是不斷學(xué)習(xí)的動(dòng)力。路漫漫其修遠(yuǎn)兮，吾將上下而求索。歡迎加我QQ:2360263057一起討論學(xué)習(xí)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96488.html

相關(guān)文章

  • Vue組件之全局組件與局部組件

    摘要：組件是最強(qiáng)大的功能之一。全局組件注冊(cè)方式組件名方法我是全局組件渲染結(jié)果我是全局組件我是全局組件這里需要注意全局組件必須寫在實(shí)例創(chuàng)建之前，才在該根元素下面生效我是全局組件這樣只會(huì)渲染根元素下面的，并不會(huì)渲染根元素下面的，并且會(huì)報(bào)錯(cuò)。 組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.j...

    codeKK 評(píng)論0 收藏0

  • Vue組件之全局組件與局部組件

    摘要：組件是最強(qiáng)大的功能之一。全局組件注冊(cè)方式組件名方法我是全局組件渲染結(jié)果我是全局組件我是全局組件這里需要注意全局組件必須寫在實(shí)例創(chuàng)建之前，才在該根元素下面生效我是全局組件這樣只會(huì)渲染根元素下面的，并不會(huì)渲染根元素下面的，并且會(huì)報(bào)錯(cuò)。 組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.j...

    qingshanli1988 評(píng)論0 收藏0

  • Vue組件之全局組件與局部組件

    摘要：組件是最強(qiáng)大的功能之一。全局組件注冊(cè)方式組件名方法我是全局組件渲染結(jié)果我是全局組件我是全局組件這里需要注意全局組件必須寫在實(shí)例創(chuàng)建之前，才在該根元素下面生效我是全局組件這樣只會(huì)渲染根元素下面的，并不會(huì)渲染根元素下面的，并且會(huì)報(bào)錯(cuò)。 組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.j...

    rickchen 評(píng)論0 收藏0

  • Vue.extend用法（主要用于需要 動(dòng)態(tài)渲染的組件，或者類似于window.alert() 提示

    摘要：一簡(jiǎn)單的使用主要用于需要?jiǎng)討B(tài)渲染的組件，或者類似于提示組件注意創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例屬于的全局，在實(shí)際業(yè)務(wù)開(kāi)發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫膶懛ㄊ褂貌襟E要更加繁瑣一些。 最近在重構(gòu)公司的項(xiàng)目，有些組件想要封裝的更靈活，例如toast、loading、messageBox等彈窗組件，模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件； mint-UI的t...

    masturbator 評(píng)論0 收藏0

  • Vue源碼學(xué)習(xí)（二）——從宏觀看Vue

    摘要：上一篇文章我們寫到從入口文件一步步找到的構(gòu)造函數(shù)，現(xiàn)在我們要去看看實(shí)例化經(jīng)歷的過(guò)程的構(gòu)造函數(shù)我們知道的構(gòu)造函數(shù)在中不明白的可以去看上一篇文章源碼學(xué)習(xí)筆記一。 上一篇文章我們寫到從入口文件一步步找到Vue的構(gòu)造函數(shù)，現(xiàn)在我們要去看看Vue實(shí)例化經(jīng)歷的過(guò)程 Vue的構(gòu)造函數(shù) 我們知道Vue的構(gòu)造函數(shù)在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue...

    AndroidTraveler 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<