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
}
}
菜鸟自己的小记录,如有错请大佬纠错

浙公网安备 33010602011771号