非父子組件間傳值（一）

非父子組件間傳值有兩種方法，一種是vuex共享數據，另一種是發布訂閱模式/觀察者模式/總線/Bus。這篇隨筆主要總結總線機制的學習心得：

首先通過在Vue.prototype上掛載一個bus屬性，指向vue實例；接下來在調用Vue或者創建組件時都會有bus屬性。

		Vue.prototype.bus=new Vue()
		var Child={
			props:['content'],
			data:function() {
				return {num:this.content}
			}, //因為vue是單項數據流，子組件不能改變父組件傳過來的值
			template:"<div @click='handleClick'>{{num}}</div>",
			methods:{
				handleClick:function(){
					this.bus.$emit('change',this.num) //傳值
				} //將值傳遞給另一個組件，由於bus是Vue實例，所以會有$emit方法向外觸發事件
			},
			mounted:function() {
				var that=this //this的指向發生了變化
				this.bus.$on('change',function(msg) {
					that.num=msg
				}) //生命鈎子監聽change事件
			}
		}

其次在局部子組件接收父組件的值content，在模板中添加一個click事件用於觸發事件和傳值（向兄弟組件）。

隨后在vue的生命周期函數mounted中監聽change事件，用傳過來的值修改DOM內容。

vue實例的定義如下：

var app = new Vue({
			el: '#app', //接管范圍
			components: {
				Child:Child
			}
		})

	<div id='app'>
	<child content="dell"></child>
	<child content="Lee"></child>
	</div>

　　最終實現點擊一個組件，該組件的值會傳給另一個組件。