使用vue進行元件化開發時，經常會遇到需要在業務元件中監聽某個公共元件的資料變化和事件觸發。大致歸類為兩種場景：

1. 業務元件為公共元件的直接父元件（父子關係）

   *事件傳遞： 子元件定義一個方法，方法中通過this.$emit(‘event’)方式將觸發事件傳遞出來；就可以在父元件中監聽event事件，當事件觸發時，執行自定義的方法。 *資料傳遞： 同樣使用\$emit，在傳遞事件的同時將資料作為引數傳遞出去，父元件呼叫時，讓本元件的資料等於傳遞過來的引數即可

   //子元件GlobalHeader中定義方法

   branchChenge () {
     this.$emit('branch-click', this.branch)
   }
    
   

   //父元件監聽branch-click事件觸發時執行函式

   ＜global-header @branch-click="branchClick">＜/global-header>
   

   //讓本元件的資料等於傳遞過來的引數，實現事件和資料的傳遞

   branchClick: function (branch) {
     this.branch = branch
     alert(this.branch)
   }
   

2. 業務元件與公共元件在同一個父元件下（兄弟關係）

   這篇帖子主要說這種情況，如圖： 程式碼：

   ＜template>
     ＜el-container>
       ＜sider-menu>＜/sider-menu>
       ＜el-container direction="vertical">
   	  ＜!-- global-header公共元件 -->
         ＜global-header @branch-click="branchClick" @sys-click="sysClick">＜/global-header>
         ＜el-main>
   		＜!-- router-view業務組建 -->
           ＜router-view ref="viewArea">＜/router-view>
         ＜/el-main>
         ＜global-footer>＜/global-footer>
       ＜/el-container>
     ＜/el-container>  
   ＜/template>
    
   

   業務場景： 分支渠道選擇元件global-header與業務元件router-view在同一個父元件下，業務元件需要監聽分支渠道資訊的變化來重新整理頁面資料。 思路： 兩個元件擁有同一個父元件，考慮通過父元件作為中間元件，實現子元件之間的事件、資料傳遞。 實現： 1.通過父元件監聽global-header元件的事件和資料變化，同場景一； 2.router-view元件中定義重新整理資料方法updData(),傳遞到父元件，由父元件代替子元件執行；

   //router-view元件中定義重新整理資料方法

   updDataFn (branch, sysId) {
       this.branch = branch
       this.sysId = sysId
       this.getUserInfo()
   }
   //父元件中引用router-view元件時，新增一個識別符號 ref='viewArea' 
   //然後父元件可以通過this.$refs.viewArea.updDataFn(branch, sysId)
   //獲取到子元件的方法
   branchClick: function (branch, sys) {
       this.updData(branch, sys)
   },
   sysClick: function (branch, sys) {
       this.updData(branch, sys)
   },
   updData (branch, sysId) {
      if (branch && sysId) {
        this.$refs.viewArea.updDataFn(branch, sysId)
     }
   }