如果想要創建全局的組件，供給其他地方時使用，可以使用Vue.extend 去創建：

這里我們封裝一個彈框組件：

（1）創建目錄

index.js

import Vue from "vue"; import Popup from "./index.vue";const PopupBox = Vue.extend(Popup);Popup.init = function(data) {//創建 PopupBox 實例，并掛載到一個元素上let instance = new PopupBox({data}).$mount();//在body中動態創建一個div元素，后面自動會把它替換成整個vue文件內的內容document.body.appendChild(instance.$el);Vue.nextTick(() => {instance.show = true;}); };export default Popup;

index.vue

<template><div class="m_popup_bg" v-show="show"><div :class="['popup', size]" v-if="type === 'multiple'"><div class="close" @click="close"></div><div v-for="(p, i) in multipleContent" :key="i"><div class="title">{{ p.title }}</div><div class="containerM"><p v-for="(m, v) in p.content" :key="v" class="content">{{ m }}</p></div></div></div><div v-else :class="['popup', size]"><div class="title">{{ title }}</div><div class="close" @click="close"></div><div class="container"><p v-for="(p, i) in paragraph" :key="i" class="content">{{ p }}</p></div></div></div> </template> <script> export default {name: "m_popup",data() {return {show: false,paragraph: [],title: "",size: "",type: "",multipleContent: []};},created() {},mounted() {console.log(123);},methods: {close() {this.show = false;}} }; </script> <style lang="scss" scoped> @import "../../style/common.scss"; .m_popup_bg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba($color: #000000, $alpha: 0.4);z-index: 999;.small {height: rem(270);}.large {height: rem(664);}.popup {width: rem(534);height: rem(664);background-color: #7b0f0e;border-radius: rem(10);position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 0 rem(10);overflow-y: scroll;.title {color: #eaeaea;font-size: rem(32);line-height: rem(100);font-weight: 600;text-align: center;// font-style: italic;}.close {content: "";width: rem(30);height: rem(30);position: absolute;top: rem(20);right: rem(20);border-radius: rem(15);background: url("../../assets/images/close.png") center center no-repeat;background-color: #dcafae;background-size: 50%;}.container {overflow: scroll;height: rem(520);.content {padding: 0 rem(25);// font-style: italic;font-size: rem(24);color: #dcafae;margin: 0;margin-bottom: rem(40);}&::-webkit-scrollbar {width: rem(4);background-color: transparent;}&::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 5px #9a2120;-webkit-box-shadow: inset 0 0 5px #9a2120;background: transparent;}&::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #7b0f0e;-webkit-box-shadow: inset 0 0 5px #7b0f0e;background: transparent;border-radius: 0;}}.containerM {.content {padding: 0 rem(25);// font-style: italic;font-size: rem(24);color: #dcafae;margin: 0;margin-bottom: rem(40);}&::-webkit-scrollbar {width: rem(4);background-color: transparent;}&::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 5px #9a2120;-webkit-box-shadow: inset 0 0 5px #9a2120;background: transparent;}&::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #7b0f0e;-webkit-box-shadow: inset 0 0 5px #7b0f0e;background: transparent;border-radius: 0;}}} } </style>

---

(2)在 main.js引入

import m_popup from "./components/m_popup/index.js"; //把$popup這個方法添加到uve的原型中，可以直接調用，當調用的時候就是執行函數內的內容 Vue.prototype.$popup = m_popup.init;

---

（3）在組件里面使用

this.$popup({title: "相關權益",paragraph: ["1. 視頻屬于參與獎發獎范圍，適用參與獎的發放規則，但不參加現金獎及人氣獎評選。","2. 作者必須有參賽周邊作品投稿，則與之相關的分享視頻才會被納入參與獎的發獎范圍。大賽征稿期間，如果沒有相關參賽周邊的投稿，僅僅分享不相干的其他視頻，則該視頻不納入參與獎發獎范圍。","3. 主辦方對本活動保留最終解釋權。"]});

---

（4）實現效果

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue全局注册组件实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。