<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="myapp1">
<button @click="incream">+1</button>
</div>
<div id="myapp2">
{{total}}
</div>
</body>
<script type="text/javascript">
var bus = new Vue;
var app1 = new Vue({
el:"#myapp1",
data:{
},
methods:{
incream:function(){
var vm = this;
bus.$emit('inc',1);
}
},
})
var app2 = new Vue({
el:"#myapp2",
data:{
total:0,
},
mounted:function(){
var vm = this;
bus.$on('inc',function(val){
vm.total+=val;
})
}
})
</script>
</html>
1、非父子组件之间的通信是通过一个空的vue对象来做事件总线 var bus = new Vue
2、$on用于监听$emit的触发，所有$on必须在触发前就要创建，等待$emit.
3、bus.$on('name',function(){})函数里面的this指向是bus对象。
4、使用webpack创建项目的时候，可以用一个单独的js，里面创建空的vue对象，用于非父子组件之间的通信，在使用的页面，把该js文件引入即可。
