SOURCE

// Vue 本身实例就支持订阅发布用法，我们可以用来做订阅发布的反向例子
const Event = new Vue();

Vue.component('parent-component',{
  template: `
		<div>
			<child-one-component>
    	</child-one-component>
			<child-two-component>
			</child-two-component>
		</div>
	`,
});

Vue.component('child-one-component',{
  template: `
		<div>
			<button @click="updateChildTwo">child-one 更新兄弟组件</button>
		</div>
	`,
  methods:{
    updateChildTwo(){
      Event.$emit("updateChildTwo",{
        msg: "child-two 组件更新了"
      });
    }
  }
});

Vue.component('child-two-component',{
  template: `
		<div>
			{{ msg }}
		</div>
	`,
  data(){
    return {
      msg: "child-two-component"
    }
  },
  created(){
    Event.$on("updateChildTwo",data => {
      this.msg = data.msg;
    })
  }
});

new Vue({
  el: '#root',
})

<script src="https://unpkg.com/vue"></script>

<div id="root">
  <parent-component>
  </parent-component>
</div>