工作日记：关于父组件给子组件传递$ref，子组件获取得到undefined问题

在实现列表滚动条定位时发现了以下这个问题，为了获取 滚动条距离页面顶部的距离（scrollTop），需要获取父组件的scrollTop，于是通过props将父组件的ref传递给子组件进行获取，一开始传递的是$refs.scroll，第一次获取的时候能够正常获取到，但之后都是undefined。于是尝试只传递$refs，在子组件中再拿取scroll，就可以了

① 父组件给子组件传递的是$refs.scroll （即:scroll-target="$refs.scroll"）

结果：子组件第一次获取ref是有值，但之后第二次开始获取ref都是undefined（原因还不清楚）

父组件

   <div class="scroll"
        ref="scroll">
      <order-info :scroll-target="$refs.scroll"></order-info>
   </div>

子组件

<template>
  <ul>
    <li class="wrapper"
            v-for="(item, index) in list>
        {{item}}
    </li>
   </ul>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, Ref } from 'vue-property-decorator';
@Component({
  name: 'order-info',
})

export default class DemoComponent extends Vue {

 @Prop() scrollTarget!: any

getScrollTop() {
    console.log(this.scrollTarget) //第一次获取ref时有值，之后获取就都为undefined（原因未知）
  }

}

</script>

① 父组件给子组件传递的是$refs （即:scroll-target="$refs"）

结果：子组件可以一直获取到ref，及通过 this.scrollTarget.scroll

父组件

   <div class="scroll"
        ref="scroll">
      <order-info :scroll-target="$refs"></order-info>
   </div>

子组件

<template>
  <ul>
    <li class="wrapper"
            v-for="(item, index) in list>
        {{item}}
    </li>
   </ul>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, Ref } from 'vue-property-decorator';
@Component({
  name: 'order-info',
})

export default class DemoComponent extends Vue {

 @Prop() scrollTarget!: any

getScrollTop() {
    console.log(this.scrollTarget.scroll) //可以获取到ref，不会出现undefined
  }

}

</script>