Wie mounte ich Vue-Komponenten global? Einführung in die Methode zum globalen Mounten von Vue-Komponenten (Code)

In diesem Artikel erfahren Sie, wie Sie Vue-Komponenten global bereitstellen. Die Einführung (Code) der Methode zum Mounten von Vue-Komponenten in das globale System hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

In einem aktuellen Projekt wurde Bootstrap-Vue für die Entwicklung verwendet. Während des eigentlichen Entwicklungsprozesses stellten wir jedoch fest, dass die von dieser Benutzeroberfläche bereitgestellten Komponenten nicht die erwarteten Ergebnisse erzielen konnten, z und modal. Wenn die Komponente auf jeder Seite eingeführt wird, muss sie im Gegensatz zum Element, das über this.$xxx aufgerufen werden kann, wiederholt werden. Die Frage ist, wie die von uns definierte Komponente oder die von uns verwendete Benutzeroberfläche aufgerufen werden soll. $xxx? Was ist mit den Komponenten des Frameworks?
Gehen Sie am Beispiel der Alert-Komponente in Bootstrap-vue wie folgt vor:

1. Definieren Sie eine Vue-Datei, um die ursprüngliche Komponente

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>

Hier geht es hauptsächlich um die Verarbeitung von Komponentenparametern und Rückrufereignissen, die sich nicht von anderen Verarbeitungskomponenten unterscheidet

2 Definieren Sie eine js-Datei, mounten Sie sie auf Vue und gleichen Sie sie mit der ab Eine von uns definierte Komponenten interagieren

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

Die Hauptidee besteht darin, den Wert durch Aufrufen dieser Methode an die Komponente zu übergeben und ihn dann an den Körper anzuhängen

3. Schließlich muss es in main sein. Verwenden Sie

import Alert from '@/components/alert/index'
Vue.use(Alert)

in js. 4. Verwenden Sie

this.$alert({msg: '欢迎━(*｀∀´*)ノ亻!'})

5

<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

Empfohlene verwandte Artikel:

Vue+Mock.js Detaillierte Schritte zum Implementieren des Hinzufügens, Löschens, Änderns und Überprüfens von Simulationstabellen

Wie erhalte ich den Wert der übergeordneten Neutronenkomponente von Vue? (Requisiten-Implementierung)

Das obige ist der detaillierte Inhalt vonWie mounte ich Vue-Komponenten global? Einführung in die Methode zum globalen Mounten von Vue-Komponenten (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!