<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head>
<body>
<div id="app">
<aa></aa>
<hr />
<bb></bb>
</div>
<script type = "text/javascript" >
// Register an empty Vue instance as a 'transit station'
var eventBus = new Vue();
// A component
Vue.component( " aa " , {
template: "<button @click='addBar'>点击</button>",
data: function() {
return {
}
},
methods: {
addBar: function () {
// Let the B component execute the listening event
eventBus.$emit( ' doCount ' )
}
}
});
// B component
Vue.component( " bb " , {
template: "<div>{{count}}</div>",
data: function() {
return {
count: 0
}
},
// Listen to the event mounted in the hook function created by the component :
function () {
var _this = this ;
eventBus.$on("doCount", function() {
_this.count ++;//+=1
});
}
});
new Vue ({
el: "#app"
});
</script>
</body>
</html>