vue实践之兄弟组件之间数据和事件的传递

    使用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)
     }
   }