{{total}}

在以上代碼中，我們在父組件中定義了一個 total 數(shù)據(jù)，初始值為 count1 + count2 的和。我們在子組件內定義了一個 handleClick() 的方法，讓父組件傳過來的 count 值每次都 +1，我們還在 handleClick() 的方法內定義了 this.emit( ′ change ′ ,1)的方法，它的意思是子組件通過 emit(′change′,1)的方法，它的意思是子組件通過emit 屬性向外觸發(fā)一個 change 事件，并且攜帶了一個參數(shù) 1，然后我們在 HTML 的 標簽內在父組件的 methods 屬性內通過 handleChange() 方法監(jiān)聽這個 change 事件，即 @change 和 $emit 的事件名稱自己定義，只要名稱一致即可。在 handleChange() 方法內接收從子組件通過 change 事件傳過來的參數(shù) 1，讓后讓 total 數(shù)據(jù)加上這個參數(shù) 1 即可實現(xiàn)一個簡單的累加計算。

以上便是子組件向父組件傳值的過程，結果如下：

從上面的例子我們已經實現(xiàn)了父子組件間的相互傳值，是通過 change 事件將每次累加的數(shù)值 1 傳給父組件，通過數(shù)據(jù)的方式修改 total 值，Vue 官方建議我們盡量通過數(shù)據(jù)的方式而不是操作 DOM 的方式來實現(xiàn)操作，但是在極端條件下我們必須要操作 DOM 來實現(xiàn)，Vue 也為我們提供操作 DOM 的方法，如下：

  
  
  



  
  
  
{{total}}