vue 关于弹窗组件的优化处理

最新推荐文章于 2024-08-26 08:00:00 发布

前端学习者小白

最新推荐文章于 2024-08-26 08:00:00 发布

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42173653/article/details/112307484

版权

在Vue项目中，为了优化频繁使用的弹窗组件，本文提出了一种避免在父组件中定义变量和方法的策略。通过Vue.extend动态构建组件，并利用Promise实现子组件与父组件之间的通信，解决了数据传递和回调问题。此外，介绍了如何通过方法参数和初始化钩子（如init）灵活地在父组件中传值给子组件。

摘要由CSDN通过智能技术生成

在之前的项目中，发现很多页面中有很多选择各种数据的弹窗,如下：
在这里插入图片描述
一般来说，在vue的项目中写成一个子组件，在父组件中引用即可。

问题在于：
1.在父组件中要定义变量，什么时候展示该子组件
2.父子组件中的通信，父组件要定义方法传给子组件调用
3.大量的父组件需要用到这个组件时，难免要重复上面的操作

于是，我想出一种思路，可不可以在父组件中通过调用方法的方式调用这个子组件，不需要在父组件中定义变量定义方法，省去一部分代码，如下：

this.alertWbs();   // 打开上面的弹窗

具体思路如下：
当调用这个方法的时候采用Vue.extend动态构建一个组件，具体代码如下：

import Vue from 'vue';
import wbs from './wbs';                // 子组件
const Wbs = Vue.extend(wbs);
var instance = null;                     // 这里做一个处理，只需要一个实例

export function alertWbs(){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAre