Vue通过js调用自定义弹窗组件

最新推荐文章于 2025-05-21 15:29:06 发布

星空下的蜗牛

最新推荐文章于 2025-05-21 15:29:06 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/stuios/article/details/129745822

文章介绍了在Vue项目中如何创建并全局使用自定义弹窗组件，通过Vue.extend构造组件实例，然后利用$mount进行挂载，使得在vue组件和js中都能方便地调用该弹窗，避免了重复引入的繁琐操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目开发中，会频繁用到弹窗组件，组件库一般都有提供，但部分情况下，项目需要自身风格的弹窗。

自定义组件如果每个页面用到就要引入一次组件那就太繁琐了，如果改为组件库提供的那种通过js直接调用的方式就会很方便。

使用Vue.extend 和 $mount 来实现

Vue.extend提供了组件的构造器，$mount用来挂载元素

//instance.js
import Vue from 'vue';
//自定义弹窗组件
import CustomModel from '@/components/CustomModel';
const constructor =Vue.extend(CustomModel);
const instance = new constructor();
instance.$mount();
//获取组件内 DOM 插入body
document.body.appendChild(instance.$el);
export default instance;

在main.js中引用

//main.js
import CustomModel from '@/util/customModel/instance';
Vue.prototype.$customModel = instance;

vue组件中使用自定义弹窗

this.$customModel.showModel("vue组件中使用自定义弹窗");

js中使用自定义弹窗

import CustomModel from '@/util/customModel/instance';
CustomModel.showModel("js中使用自定义弹窗");