<template>
<div class="app-container">

<div class="two">    
    <simulative :station='station1' :tmp='tmp1' class="elevator" ></simulative> 
    <simulative :station='station2' :tmp='tmp2' class="elevator" ></simulative> 
</div>

</div>
</template>
// 上面是父组件
// ---------------------------------------------
// 下面是子组件 simulative.vue
<template>
<div class="runBox">

<div class="chart">
  <img style="z-index:100" src="./assets/下.png" alt="" width="250" height="750">
  <img id="cage" style="width:100px;height:150px; z-index:200;left: 80px;" src="./assets/3关.png" alt="">
  <img style="z-index:300" src="./assets/上.png" alt="" width="250" height="750">
</div>

</div>
</template>

<script>
var len = 530 // 电梯可以运行的像素高度
var i = 1
export default {

props: ['station', 'tmp'],
data() {
  return {
    grid: null
  }
},
mounted() {
  // 每一层的高度
  this.grid = 1.0 * len / this.station
  const tmp_px = (this.grid * this.tmp) + 'px'
  console.log(tmp_px)
  document.getElementById('cage').style.bottom = tmp_px
},
watch: {
  tmp: function() {
    const tmp_px = (this.grid * this.tmp) + 'px'
    document.getElementById('cage').style.bottom = tmp_px
    console.log(i++)
  }
}

}
</script>