<!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用于監(jiān)聽$emit的觸發(fā)滓鸠，所有$on必須在觸發(fā)前就要創(chuàng)建践盼，等待$emit.
3必搞、bus.$on('name',function(){})函數(shù)里面的this指向是bus對象。
4、使用webpack創(chuàng)建項目的時候，可以用一個單獨的js抚恒，里面創(chuàng)建空的vue對象，用于非父子組件之間的通信络拌，在使用的頁面俭驮，把該js文件引入即可。
