vue 구성요소를 전역적으로 마운트하는 방법은 무엇입니까? Vue 구성요소를 전역적으로 마운트하는 방법 소개(코드)
- 不言원래의
- 2018-08-01 16:59:006041검색
이 기사에서는 Vue 구성 요소를 전역적으로 마운트하는 방법을 소개합니다. Vue 컴포넌트를 글로벌 시스템에 마운트하는 방법에 대한 소개(코드)에는 특정 참고 가치가 있으므로 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
최근 프로젝트에서는 bootstrap-vue를 개발에 사용했는데, 실제 개발 과정에서 이 UI에서 제공하는 컴포넌트가 우리가 기대한 결과를 얻지 못하는 것을 발견했습니다. this.$xxx를 통해 호출할 수 있는 요소와 달리 각 페이지마다 반복적으로 소개되어야 하므로, 우리가 정의한 구성 요소나 사용하는 UI 프레임워크의 구성 요소를 this.$xxx를 통해 어떻게 호출할지에 대한 의문이 생깁니다.
boottrap-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. Vue에 마운트할 js 파일을 정의하고 우리가 정의한 구성 요소와 상호 작용합니다
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
주요 아이디어는 이것을 호출하는 것입니다. 3. 마지막으로 main.js
import Alert from '@/components/alert/index' Vue.use(Alert)
에서 사용해야 합니다.
this.$alert({msg: '欢迎━(*｀∀´*)ノ亻!'})
5를 사용하세요. 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의 하위 구성 요소가 값을 얻는 방법 상위 구성 요소의? (소품 구현)
위 내용은 vue 구성요소를 전역적으로 마운트하는 방법은 무엇입니까? Vue 구성요소를 전역적으로 마운트하는 방법 소개(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.