Vue `$refs` проблемы

Question

У меня есть проблема в этом коде

let bus = new Vue();

Vue.component('building-inner', {
 
  props: ['floors', 'queue'],
  template: `<div class="building-inner">
    <div v-for="(floor, index) in floors" class="building-floor" :ref="'floor' + (floors - index)">
      <h3>Floor #{{floors - index }}</h3>
      <button type="button" class="up" v-if="index !== floors - floors">up</button>
      <button type="button" class="down" v-if="index !== floors - 1">down</button>
    </div> 
  </div>`,
  beforeMount(){
    bus.$emit('floors', this.$refs);
  }
})

Vue.component('elevator', {
  data: {
    floorRefs: null
  },
  props: ['floors', 'queue'],
  template: `<div class="elevator" ref="elevator">
              <button type="button" v-for="(btn, index) in floors" class="elevator-btn" @click="go(index + 1)">{{index + 1}}</button>
            </div>`,
  beforeMount() {
    bus.$on('floors', function(val){
      this.floorRefs = val;
      console.log(this.floorRefs)
    })
  },
  methods: {
    go(index) {
      this.$refs.elevator.style.top = this.floorRefs['floor' + index][0].offsetTop + 'px'
    }
  }
})


new Vue({
  el: '#building',
  data: {
    queue: [],
    floors: 5,
    current: 0
  }
})

<div class="building" id="building">
  <elevator v-bind:floors="floors" v-bind:queue="queue"></elevator>
  <building-inner v-bind:floors="floors" v-bind:queue="queue"></building-inner>
</div>

Я пытался получить доступ к реквизиту внутри $refs получает меня undefined, Зачем?

Answer 1

Вы должны использовать смонтированный хук, чтобы получить доступ к ссылкам, потому что на "созданном" событии просто создается экземпляр, а не dom. https://vuejs.org/v2/guide/instance.html

Вы всегда должны сначала рассмотреть возможность использования свойства компьютера и использовать привязку стиля вместо использования ссылок.

<div :style="calculatedStyle" > ... </div>

computed: {
  calculatedStyle (){
    top: someCalculation(this.someProp),
    left: someCalculation2(this.someProp2),
    ....
  }
}

Неправильно передавать ref другому компоненту, особенно если это не родительские и дочерние отношения.