Comment monter les composants Vue globalement ? Introduction à la méthode de montage des composants Vue globalement (code)

Cet article vous présente comment monter des composants vue globalement ? L'introduction (code) de la méthode de montage des composants Vue sur le système global a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Dans un projet récent, bootstrap-vue a été utilisé pour le développement. Cependant, au cours du processus de développement lui-même, nous avons constaté que les composants fournis par cette interface utilisateur ne pouvaient pas atteindre les résultats attendus, comme l'alerte. et modal. Lorsque le composant est introduit sur chaque page, il doit être introduit à plusieurs reprises, contrairement à l'élément, qui peut être appelé via this.$xxx, la question est de savoir comment appeler le composant que nous avons défini ou l'interface utilisateur que nous utilisons via cela. $xxx ? Qu'en est-il des composants du framework.
En prenant le composant Alert dans bootstrap-vue comme exemple, procédez comme suit :

1. Définissez un fichier vue pour ré-encapsuler le composant d'origine

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>

Il s'agit principalement du traitement des paramètres des composants et des événements de rappel, qui n'est pas différent des autres composants de traitement

2 Définissez un fichier js et montez-le sur Vue, puis connectez-le. avec nous Interagissez avec les composants définis

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

L'idée principale est de transmettre la valeur au composant en appelant cette méthode, puis de l'ajouter au corps

3. Enfin, vous devez l'utiliser dans main.js

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

4. Utilisez

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

5. L'encapsulation de confrim est la même

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

Articles connexes recommandés :

Vue+Mock.js Étapes détaillées pour implémenter une table simulée ajout, suppression, modification et vérification

Comment les sous-composants de Vue obtiennent-ils la valeur de leurs composants parents ? (implémentation des accessoires)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!