VueJs中的el-dialog的坑[1]

• VueJs中的el-dialog的坑[1]
• 需要实现的功能
• 1.直接从页面A到页面C
• 2.从页面A到页面B
• 3.再从页面B跳转到页面C

需要实现的功能

假设有三个页面A,B和页面C，我们有这样一个需求，可以从页面A直接带参数传给页面C，还需满足一定条件，先从A传到B，然后再从B到C（这里的B和C都是对话框，并且弹出C时，需要将B给隐藏掉）
页面A的名字叫：con_apply_tz.vue
页面B的名字叫：con_apply_ywht.vue
页面C的名字叫：con_tree.vue

1.直接从页面A到页面C

就直接通过 Vue 的父子传参的方式，没有什么可以说的：
页面A：

页面A 的js代码

页面C
定义一个 接受父页面传过来参数的属性对象 paramsInfo
这里需要注意的一点是必须要将props属性定义在components 之下

    props:{
      paramsInfo: {//接收父组件传递过来的参数 

      },
    },

然后在页面上面调用

    created() {

      console.log("this.paramsInfo is "+JSON.stringify(this.paramsInfo))
      this.dialogVisible = this.paramsInfo.conTreeVisiable
      console.log("this.dialogVisible----------->"+this.paramsInfo.conTreeVisiable)
      param=this.paramsInfo
      console.log(JSON.stringify(param))

      this.initData(param)
    },

其中需要说明的事情是，页面C本身就是一个el-dialog对象，并且通过dialogVisible来控制页面C这个dialog显示与否

2.从页面A到页面B

页面B的核心代码:

页面B的Js代码

    props: {

      paramsConApplyTz:{ //用于接受父组件页面A con_apply_tz.vue传来的参数
        //con_apply_tz传递过来的参数放在这里
      }
    },


    data() {
      return {
        paramsInfo:{//使用父子传参的方式传递参数，父组件向子组件传递多个参数
          
        },

        isShowYWHT:false,
        }
    },
    created(){
    
      let param =this.paramsConApplyTz
      this.isShowYWHT=this.paramsConApplyTz.isShowYWHT //通过这行代码可以控制页面B的显示与否
      console.log("页面跳转成功："+JSON.stringify(param))
    },

3.再从页面B跳转到页面C

这里的步骤需要说明一下，是通过页面B，create(）这个方法被调用完成之后，通过页面A上的回调函数openConTree（），这个函数做了两件事：
1.将页面B给关闭，通过将isShowYWHT 这个值设置为false可以做到。
2.将参数传给页面C，参数param中包含了页面C中是否控制显示的变量 conTreeVisiable,通过将这个变量设置为true,既能够实现页面跳转，同时也可以将 参数传递给子页面C

页面A上的回调函数：

      openConTree(param){
        console.log("[openConTree] invoke..."+JSON.stringify(param))
        this.paramsConApplyTz.isShowYWHT=false;
        this.paramsInfo=param;
      }

页面B的相关业务逻辑

      create(row) { 

       createConInfo(row).then(response1 => {
          let res = response1.data

          if(res.msg!=''&&res.msg!=null){
            alert(res.msg)
            return false
          }

          console.log("con_tree visiable "+JSON.stringify(this.paramsConApplyTz))
          this.paramsInfo={
            conTreeVisiable:true,
            contractId:res.conInfo.contractId,
            contractType:'02',
            amountDetailId:row.amountDetailId,
            proFlag:'1',
            processInstId:res.processInstId
          }

          console.log("con_tree visiable2 "+JSON.stringify(this.paramsInfo))
          console.log("创建完成，调用父页面中的回调函数openConTree....")
          this.$emit('openConTree',this.paramsInfo);
 
        }).catch((error) => {
    
          console.log(error)
        })



      },

原文：https://blog.csdn.net/u014028392/article/details/88424347