vue组建通信，包含父子组建、跨级（爷孙）通信、兄弟组件（类似于观察者模式）通信

	<div id="app">
		<h1>下面的父子通信,主要组件定义的顺序不能换</h1>
		<parent></parent>
		<h1>下面的兄弟组件通信，</h1>
		<up></up>
		<down></down>
	</div>
	<script type="text/javascript">
		Vue.component('child',{
			props:['fname'],
			template:`
			<div>
			这是子组件，父组件是{{fname}}
			<button @click="$emit('toParent','子组件的信息来了')">点击通知消息</button>
			</div>
			`
		})
		Vue.component('parent',{
			data(){
				return{
					info:'无消息'
				}
				
			},
			template:`
			<div>
			这是父组件，{{info}}
			<child fname="parent" @toParent="getMessage" ></child>
			</div>
			`,
			methods:{
				getMessage(msg){
					this.info=msg
				}
			}
		})
		
		let bus=new Vue()
		Vue.prototype.bus=bus
		Vue.component('up', {
			data() {
				return {
					msg: '未传递消息'
				}
			},
			template: `
			<div class="up">
			<p>这是up组件, 下一行为down传递的消息</p>
			<p>{{msg}}</p>
			</div>
			`,
			mounted() {
				this.bus.$on('send', (msg)=> {
					this.msg = (msg)
				})
			}
		})

		Vue.component('down', {
			template: `
			<div class="down">
			<p>这是down</p>
			<button @click="toUp">点击我向up组件传递消息</button>
			</div>
			`,
			methods: {
				toUp() {
					this.bus.$emit('send', 'down来消息了')
				}
			}
		})

		new Vue({
			el: '#app',
		})
	</script>