事件总线工作原理

vue二十二:vue基础之事件总线实现非父子通信

在代码中实现

创建非父子关系的组件

vue二十二:vue基础之事件总线实现非父子通信

vue二十二:vue基础之事件总线实现非父子通信

 

创建中央事件总线(空的vue实例)

vue二十二:vue基础之事件总线实现非父子通信

 

mounted生命周期函数,在当前组件的dom创建完后就会调用

vue二十二:vue基础之事件总线实现非父子通信

vue二十二:vue基础之事件总线实现非父子通信

在mounted生命周期中绑定订阅事件总线

vue二十二:vue基础之事件总线实现非父子通信

绑定发布事件总线

vue二十二:vue基础之事件总线实现非父子通信

vue二十二:vue基础之事件总线实现非父子通信

获取发布的状态

vue二十二:vue基础之事件总线实现非父子通信

vue二十二:vue基础之事件总线实现非父子通信

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div ,
})

</script>
</body>
</html>

 

相关文章: