vue 弹窗如何嵌入其它页面

落日映苍穹つ 2022-09-13 04:27 333阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16][]

直接上代码。

代码使用的是Element-ui。

## A页面（父页面） ##

### 将B页面当作组件引入。 ###

import taskLogList from '../dialogPage/index.vue'
    export default {  
      components:{
          dialogPage
        },
    ...
    }

### 将组件引入放到HTML代码中 ###

代码说明

queryId：自定义的传值参数。 目的是将值从父页面传递到子页面去。

formPageVisible：显示参数。

### 在调用当前弹窗的方法里面进行如下设置 ###

methods:{
        ...
    
        /**
        * 弹窗方法
        */
        showLog(obj){
    
            //显示
            this.formPageVisible = true;
    
            //赋值
            this.queryId= obj.queryId;
    
            //调用子页面方法
            this.$nextTick(()=>{
                
              this.$refs.formPageRef.getlist();
            })
          }
    }

基本上A页面已经可以退休了。

下面B页面开始上场。

## B页面（子页面） ##

B页面主要的工作是两个。

1、获取A页面的传值

2、方法的实现。

### 1、获取A页面的传值 ###

传值的话，在Vue中。一般在props中进行设置。

export default {
        props: {
          queryId:{
            type: String,
            default: '',
          },
        },
     ...

在这个里面，queryId是前面传递过来的参数。

### 2、方法的实现。 ###

省略....

对了，记得把B页面设置为dialog。否则弹窗的效果可能不能实现哦。

留个小问题，如何把B页面的操作结果返回给A页面呢？

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c2c4859aaf9c4ac0af244d6dec352b4c.png