vue元件如何掛載到全域？ Vue元件掛載到全域的方法介紹（程式碼）

這篇文章要跟大家介紹的內容是關於vue元件如何掛載到全域？ Vue元件掛載到全局的方法介紹（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在最近的專案中，使用了bootstrap-vue來開發，然而在實際的開發過程中卻發現這個UI提供的元件並不能打到我們預期的效果，像alert、modal等元件每個頁面引入就得重複引入，並不像element那樣可以透過this.$xxx來調用，那麼問題來了，如何透過this.$xxx來調用起我們定義的元件或對我們所使用的UI框架的組件呢。
以bootstrap-vue中的Alert元件為例，分步進行：

#1、定義一個vue檔案實作對原元件的再次封裝

main.vue

<template>
  <b-alert
    class="alert-wrap pt-4 pb-4"
    :show="isAutoClose"
    :variant="type" dismissible
    :fade="true"
    @dismiss-count-down="countDownChanged"
    @dismissed="dismiss"
    >
     {{msg}}
    </b-alert>
</template>
<script>
export default {
  /**
   * 参考: https://bootstrap-vue.js.org/docs/components/alert
   * @param {string|number} msg 弹框内容
   * @param {tstring} type 弹出框类型 对应bootstrap-vue中variant 可选值有：'primary'、'secondary'、'success'、'danger'、'warning'、'info'、'light'、'dark'默认值为 'info'
   * @param {boolean} autoClose 是否自动关闭弹出框
   * @param {number} duration 弹出框存在时间(单位：秒)
   * @param {function} closed 弹出框关闭，手动及自动关闭都会触发
   */
  props: {
    msg: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'info'
    },
    autoClose: {
      type: Boolean,
      default: true
    },
    duration: {
      type: Number,
      default: 3
    },
    closed: {
      type: Function,
      default: null
    }
  },
  methods: {
    dismiss () {
      this.duration = 0
    },
    countDownChanged (duration) {
      this.duration = duration
    }
  },
  computed: {
    isAutoClose () {
      if (this.autoClose) {
        return this.duration
      } else {
        return true
      }
    }
  },
  watch: {
    duration () {
      if (this.duration === 0) {
        if (this.closed) this.closed()
      }
    }
  }
}
</script>
<style scoped>
.alert-wrap {
  position: fixed;
  width: 600px;
  top: 80px;
  left: 50%;
  margin-left: -200px;
  z-index: 2000;
  font-size: 1.5rem;
}
</style>

這裡主要是對元件參數、回呼事件的一些處理，與其他處理元件的情況沒有什麼差別

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

<template>
  <b-modal
    v-if="!destroy"
    v-model="isShow"
    title="温馨提示"
    @change="modalChange"
    @show="modalShow"
    @shown="modalShown"
    @hide="modalHide"
    @hidden="modalHidden"
    @ok="modalOk"
    @cancel="modalCancel"
    :centered="true"
    :hide-header-close="hideHeaderClose"
    :no-close-on-backdrop="noCloseOnBackdrop"
    :no-close-on-esc="noCloseOnEsc"
    :cancel-title="cancelTitle"
    :ok-title="okTitle">
      <p class="my-4">{{msg}}</p>
  </b-modal>
</template>
<script>
export default {
  /**
   * 参考: https://bootstrap-vue.js.org/docs/components/modal
   * @param {boolean} isShow 是否显示modal框
   * @param {string|number} msg 展示内容
   * @param {boolean} hideHeaderClose 是否展示右上角关闭按钮 默认展示
   * @param {string} cancelTitle 取消按钮文字
   * @param {string} okTitle 确定按钮文字
   * @param {boolean} noCloseOnBackdrop 能否通过点击外部区域关闭弹框
   * @param {boolean} noCloseOnEsc 能否通过键盘Esc按键关闭弹框
   * @param {function} change 事件触发顺序： show -> change -> shown -> cancel | ok -> hide -> change -> hidden
   * @param {function} show before modal is shown
   * @param {function} shown modal is shown
   * @param {function} hide before modal has hidden
   * @param {function} hidden after modal is hidden
   * @param {function} ok 点击'确定'按钮
   * @param {function} cancel 点击'取消'按钮
   * @param {Boolean} destroy 组件是否销毁 在官方并没有找到手动销毁组件的方法，只能通过v-if来实现
   */
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    msg: {
      type: [String, Number],
      default: ''
    },
    hideHeaderClose: {
      type: Boolean,
      default: false
    },
    cancelTitle: {
      type: String,
      default: '取消'
    },
    okTitle: {
      type: String,
      default: '确定'
    },
    noCloseOnBackdrop: {
      type: Boolean,
      default: true
    },
    noCloseOnEsc: {
      type: Boolean,
      default: true
    },
    change: {
      type: Function,
      default: null
    },
    show: {
      type: Function,
      default: null
    },
    shown: {
      type: Function,
      default: null
    },
    hide: {
      type: Function,
      default: null
    },
    hidden: {
      type: Function,
      default: null
    },
    ok: {
      type: Function,
      default: null
    },
    cancel: {
      type: Function,
      default: null
    },
    destroy: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    modalChange () {
      if (this.change) this.change()
    },
    modalShow () {
      if (this.show) this.show()
    },
    modalShown () {
      if (this.shown) this.shown()
    },
    modalHide () {
      if (this.hide) this.hide()
    },
    modalHidden () {
      if (this.hidden) this.hidden()
      this.destroy = true
    },
    modalOk () {
      if (this.ok) this.ok()
    },
    modalCancel () {
      if (this.cancel) this.cancel()
    }
  }
}
</script>

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 Mock.js實作模擬表格增刪改查詳細步驟

Vue中子元件怎麼取得父元件的值？ （props實作）

以上是vue元件如何掛載到全域？ Vue元件掛載到全域的方法介紹（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！