vue 弹窗如何嵌入其它页面

Posted 2021-10-18 沛沛老爹

直接上代码。

代码使用的是Element-ui。

A页面（父页面）

将B页面当作组件引入。

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

将组件引入放到html代码中

 <dialogPage 
    v-if="formPageVisible" 
    ref="formPageRef" 
    :queryId="logDialog.queryId">
</dialogPage >

代码说明

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页面呢？