<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<script src="https://unpkg.com/vue@2.1.10/dist/vue.js" type="text/javascript" charset="utf-8"></script>-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<component-a>
</component-a>
<component-b />
</div>
<script>
var bus = new Vue()
Vue.component('component-a', {
template: '<div>This is App Content {{ info }}</div>',
created() {
bus.$on('anotherclick', (res) => { //接收
this.info = res;
})
},
data: () => {
return {
info: ''
}
}
})
Vue.component('component-b', {
template: '<div @click="emit">This is Another Content </div>',
ready: function () {
bus.$emit('anotherclick','aaa')//发送
},
// mounted: function () {
// this.$nextTick(function () {
// bus.$emit('anotherclick','aaa')//发送
// })
// }
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
1.兼容vue1.0和2.0 取代$broadcast $dispatch
2.vue-bus 配合webpack一起使用
https://github.com/yangmingshan/vue-bus
http://div.io/topic/1864