vue 弹窗如何嵌入其它页面

Posted 沛沛老爹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 弹窗如何嵌入其它页面相关的知识,希望对你有一定的参考价值。

直接上代码。

代码使用的是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页面呢?

以上是关于vue 弹窗如何嵌入其它页面的主要内容,如果未能解决你的问题,请参考以下文章

vue弹窗如何嵌入其它vue页面

vue2 我自己写的弹窗组件,弹窗在页面里显示后,原JS文件失效,怎么回事?

vue 如何设置点击空白处的遮罩层关闭弹窗

Liferay 7.3:如何预配置嵌入在页面片段中的 portlet?

小程序各种功能代码片段整理---持续更新

解决:vue 弹窗滑动 底部页面跟着滑动