vue2之跨页面调用和传参

A页面调用B页面的方法

不涉及父子组件时,调用的方式,使用this.$root.$emit()发送消息,进行调用,

/**
* 打开在全局组件中的弹框
*/
handleOpenModal(){
    this.$root.$emit('toolbar', {
        type: 'modal',
        fun: that => {
          that.handleOpen(true)
        }
     })
}

 

B页面接收,使用this.$root.$on(),接收并执行自己的逻辑

mounted(){
      this.$root.$off('toolbar')
      this.$root.$on('toolbar', $event => { 
        switch ($event.type) {
          case 'other':
            this.handleClick(false)
            break
          case 'modal':
            if (typeof $event.fun === 'function') {
              $event.fun(this)
            }
            break
          default:
            break
        }
      })
} ,

destroyed() {
    this.$root.$off('toolbar')
},
methods: {
    /**
    * 打开/关闭弹框
    */
    handleOpen(data){
         this.modalVisible=data
    }
}

  


posted @ 2023-04-19 10:39  络角阔落  阅读(369)  评论(0)    收藏  举报