关于vue2.0vm.$on接收兄弟组件数据，无法更新data数据的问题？

Question

1.问题描述

使用vue2.0框架，webpack打包。有几个兄弟组件<v-nav><aboutMe><myExperise><studyExperience>等，其他组件用vm.$emit传递dom结构，V-nav组件用vm.$on来接收dom的数据，保存到data中定义的对象里，在v-nav组件中，在vm.$on里console.log打印，可以得到数据。在外部用vm.$nextTick中只能打印aboutMe组件传来的dom数据，其他组件打印为空对象

2.相关截图

• 目录结构

• 父组件的template

<template>
  <div id="app" ref="app">
    <v-header></v-header>
    <v-nav :navScroll="navScroll"></v-nav>
    <aboutMe></aboutMe>
    <myExperise></myExperise>
    <studyExperience></studyExperience>
    <personalInterest></personalInterest>
    <myProjects></myProjects>
  </div>
</template>

• nav组件中的js

<script type="text/ecmascript-6">
  import bus from '../bus.js'

  export default {
    data () {
      return {
        classMap: ['H0ME', 'ABOUT ME', 'MY EXPERTISE', 'STUDY EXPERIENCE', 'MY PROJECTS'],
        show: true,
        myExperiseHook: {},
        aboutMeHook: {},
        homeHook: {},
        studyExperienceHook: {},
        myProjectsHook: {},
        el: {},
        navScroll: {}
      }
    },
    mounted () {
      if (document.body.clientWidth <= 425) {
        this.show = false
      }
      bus.$on('el3', (msg) => {
        this.aboutMeHook = msg
      })
      bus.$on('el2', function (msg) {
        this.homeHook = msg
      })
      bus.$on('el1', function (msg) {
        this.myExperiseHook = msg
      })
      bus.$on('el4', function (msg) {
        this.studyExperienceHook = msg
      })
      bus.$on('el5', function (msg) {
        this.myProjectsHook = msg
      })
      bus.$on('el6', function (msg) {
        this.el = msg
      })
      bus.$on('el7', function (msg) {
        this.navScroll = msg
      })
      this.$nextTick(() => {
        console.log(this.aboutMeHook)
        console.log(this.studyExperienceHook)
        console.log(this.myExperiseHook)
        console.log(this.navScroll)
      })
    }
  }
</script>

• aboutMe组件

<template>
  <div class="about-me" ref="aboutMe">
    <div class="content">
      <div class="left-picture"></div>
      <div class="right">
        <div class="title">ABOUT ME</div>
        <span v-for="(item,index) in infoMap" class="info">{{infoMap[index]}}</span>
        <p v-show='show' class="text">{{text}}</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import bus from '../bus.js'

  export default {
    data () {
      return {
        show: true,
        msg: {}
      }
    },
    mounted () {
      // this.$nextTick(() => {
      this.hideText()
      this.msg = this.$refs.aboutMe
      bus.$emit('el3', this.msg)
      // })
    },
    methods: {
      hideText () {
        if (document.body.clientWidth <= 425) {
          this.show = false
        }
      }
    }
  }
</script>

• myExperise组件

<template>
  <div class="my-expertise" ref="myExpertise">
    <div class="content">
      <div class="top">
        <h1 class="title-en">MY EXPERTISE</h1>
        <h2 class="title-cn">技能展示</h2>
      </div>
      <div class="main">
        <div v-for="(skill,index) in skills" class="skill">
          <div class="num">{{skills[index].num}}</div>
          <div class="name">{{skills[index].name}}</div>
          <div class="desc">{{skills[index].desc}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import bus from '../bus.js'
  export default {
    data () {
      return {
        msg: {}
      }
    },
    mounted () {
      // this.$nextTick(() => {
      this.msg = this.$refs.myExpertise
      bus.$emit('el1', this.msg)
      // })
    }
  }
</script>

• 控制台

在控制台中只能打印aboutMe组件的dom,无法打印myExperise组件的dom,其他几个组件也和myExperise组件一样，无法打印

3. 渴望得到解决

为什么只有aboutMe组件特殊，其他组件就无法打印，哪里有问题
如何修改，可以获得其他几个组件的dom

Answer 1

仔细看你$on的地方, 只有aboutme是用了箭头函数.
(我想下面都是废话, 你已经找到问题了)
原因: 箭头函数的this指向的是上层作用域, 所以this.aboutme为vm的属性赋值了. 下面的this指向是当前函数.
解决: 1. 把下面的函数全换成箭头函数. 2. 前面加let vm = this, 后面函数里写vm.xxx = msg.

Answer 2

在父组件中给那些子组件加ref就可以获取到
比如
<myExperise ref="myExpertise"></myExperise>
获取 dom: this.$refs.myExpertise.$el
然后再通过prop传给v-nav