vue組件之間的通信

vue組件之間的通信

1.父子組件的通信

a.父組件向子組件傳遞通信

1. 採用vue中的 props

   單向數據流
   所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
   額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新爲最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。

   在子組件中 使用dom屬性進行通信。

   你已經知道了可以像這樣給 prop 傳入一個靜態的值：
   <blog-post title="My journey with Vue"></blog-post>
   <!-- 動態賦予一個變量的值 -->
   <blog-post v-bind:title="post.title"></blog-post>
   <!-- 動態賦予一個複雜表達式的值 -->
   <blog-post  v-bind:title="post.title + ' by ' + post.author.name"
   ></blog-post>	
   

2. $broadcast

   $dispatch 和 $broadcast 已經被棄用。
   $dispatch 和 $broadcast 已經被棄用。請使用更多簡明清晰的組件間通信和更好的狀態管理方案，如：Vuex。
   簡單的用法

   子組件通過**$on**註冊監聽

   // 組件通過$on來註冊監聽 getcalendar
   // ...
   	created(){
   		this.$on('getcalendar',this.calendar)
   	},
   	methods:{
   		calendar(){....}
   	},
   	destroyed(){
   		this.$off('getcalendar',this.calendar)
   	}
   

   父組件通過**$broadcast**觸發所有子組件對應的監聽;

   	// 父組件廣播getcalendar事件，來傳遞數據
   	methods:{
   		sendcalendar(){
   			//觸發所有的組件的getcalendar監聽。
   			this.$broadcst('getcalendar',moment().calendar())
   		}
   	}
   

2.子組件向父組件傳遞數據

TODO://類似$broadcast  子組件開啓$emit向父組件發射觸發事件。 父組件通過$on註冊事件

3.推薦的通信方式

1. 用集中式的事件中間件

   因爲基於組件樹結構的事件流方式實在是讓人難以理解，並且在組件結構擴展的過程中會變得越來越脆弱。這種事件方式確實不太好，我們也不希望在以後讓開發者們太痛苦。並且$dispatch 和 $broadcast 也沒有解決兄弟組件間的通信問題。 對於$dispatch 和 $broadcast最簡單的升級方式就是：通過使用事件中心，允許組件自由交流，無論組件處於組件樹的哪一層。由於 Vue 實例實現了一個事件分發接口，你可以通過實例化一個空的 Vue 實例來實現這個目的。
   這些方法的最常見用途之一是父子組件的相互通信。在這些情況下，你可以使用 v-on監聽子組件上 $emit 的變化。這可以允許你很方便的添加事件顯性。 然而，如果是跨多層父子組件通信的話，$emit 並沒有什麼用。相反，用集中式的事件中間件可以做到簡單的升級。這會讓組件之間的通信非常順利，即使是兄弟組件。因爲 Vue 通過事件發射器接口執行實例，實際上你可以使用一個空的 Vue 實例。

   1. 創建事件中心管理組件間的通信：

      	/ 將在各處使用該事件中心
      	// 組件通過它來通信
      	var eventHub = new Vue()
      

   2. 使用 $emit, $on, $off 分別來分發、監聽、取消監聽事件：

      	// TODO刪除組件  創建一個刪除TODO記錄的方法
      	// ...
      		methods:{
      			deleteFnc(id){
      				eventHub.$emit('todo.delete',id)
      			}
      		}
      

      	// TODO新增組件  創建一個新增TODO記錄的方法
      	// ...
      		methods:{
      			addFnc(item){
      				eventHub.$emit('todo.add',item)
      			}
      		}
      

      	// TODO頁面  通過事件中心 監聽todo.delete和todo.add的事件，
      	// 在創建組件的時候註冊add和delete監聽，在銷燬時註銷監聽
      	// ...
      		created(){
      			 eventHub.$on('add-todo', this.addTodo)
      			 eventHub.$on('delete-todo', this.deleteTodo)
      		},
      		methods:{
      			addTodo(item){
      				this.list.push(item)
      			},
      			deleteTodo(id){
      				this.list.remove(item=>item.id === id)
      			},
      		},
      		// 清除事件監聽
      		destroyed(){
      		 	 eventHub.$off('add-todo', this.addTodo)
      			 eventHub.$off('delete-todo', this.deleteTodo)
      		}
      

   2.vueX管理