VUE 弹窗组件实现动态挂载

最新推荐文章于 2025-10-31 08:53:14 发布

原创最新推荐文章于 2025-10-31 08:53:14 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端开发专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何在Vue项目中实现动态加载弹窗组件，避免在每个页面import，提高代码效率。通过VUE.extend创建登录组件实例，并在main.js中注册。在需要的地方调用install()方法挂载弹窗，使用this.$root.$emit('closeLogin')关闭，还能传递参数到组件。

有时候在开发中遇到这种需求，需要在某些页面中动态加载一个弹窗，比如未登录的时候，在点击某些地方，需要弹出登录框要求登录。

如果在每个页面都import进去未免太过繁琐，在根页面引入后监听也不咋好的感觉。

因此，可以使用VUE.extend动态挂在组件。以登录框组件为例：

首先，自然是要一个登录组件页面，login.vue，这个按照自己的需求写就行了。

然后，新建login.js，代码如下：

import Vue from "vue";
import login from "./login.vue";
import store from "../../store";
const PopupBox = Vue.extend(login);
let instance;
login.install = function(data) {
  instance = new PopupBox({
    data
  }).$mount();
  instance.$store = store;
  document.body.appendChild(instance.$el);

  Vue.nextTick(() => {
    instance.showLogin();
  });
};
login.unInstall = function() {
  if (instance) {
    document.body.removeChild(instance.$el);
    instance.$destroy();
    instance = null;
  }
};
export default login;

之后，在main.js里加入：

import login from "./components/Login/login";
Vue.prototype.$login = login;

这个时候，就可以在有需要的地方，使用install()来挂在弹框：

this.$login.install();

在需要关闭弹框的地方，就用：

this.$login.unInstall();

还可以往组件传参，比如要传一个id：

 instance = new PopupBox({
    propsData:{
      id:id
   }
  }).$mount();

这样在登录组件里，id就是props的存在啦~或者之间用data覆盖。

是不是很简单呢？动手试试吧~