1.問題描述

使用vue2.0框架，webpack打包。有幾個(gè)兄弟組件<v-nav><aboutMe><myExperise><studyExperience>等，其他組件用vm.$emit傳遞dom結(jié)構(gòu)，V-nav組件用vm.$on來接收dom的數(shù)據(jù)，保存到data中定義的對(duì)象里，在v-nav組件中，在vm.$on里console.log打印，可以得到數(shù)據(jù)。在外部用vm.$nextTick中只能打印aboutMe組件傳來的dom數(shù)據(jù)，其他組件打印為空對(duì)象

2.相關(guān)截圖

• 目錄結(jié)構(gòu)

• 父組件的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>

• 控制臺(tái)

在控制臺(tái)中只能打印aboutMe組件的dom,無法打印myExperise組件的dom,其他幾個(gè)組件也和myExperise組件一樣，無法打印

3. 渴望得到解決

為什么只有aboutMe組件特殊，其他組件就無法打印，哪里有問題
如何修改，可以獲得其他幾個(gè)組件的dom