如何在VueJS中传递动态鼠标滚动值作为道具

<template>
  <div v-on:scroll="scrollHandler">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollValue: 0
    };
  },
  methods: {
    scrollHandler(event) {
      this.scrollValue = event.target.scrollTop;
    }
  }
};
</script>

<template>
  <div>
    <ChildComponent :scroll-value="scrollValue" />
  </div>
</template>

<script>
export default {
  props: ['scrollValue'],
  // 其他组件逻辑
};
</script>