javascript - Nuxt.js:如何定义组件的mount()中使用的通用方法，以及如何更改组件的数据

我想如下检测组件mounted（）中的scroll事件，并更改组件中使用的数据。
・组件

<script>
import checkScroll from '~/utils/checkScroll'

export default {
  ...
  data() {
    return {
      scrollPosition: 0
    }
  },
  mounted() {
    window.addEventListener(
      'scroll',
      checkScroll(this.scrollPosition, window.scrollY)
    )
  },
</script>

・实用程序/checkscroll.js

export default function checkScroll(scrollPosition, scrollY) {
  scrollPosition = scrollY
}

这个案子有两个问题
一。我想在每次滚动时执行这个函数，但是函数只在第一个滚动条上执行。
2.组件内部this.scrollPosition的值不变。
如果是这样，它将如何工作？

最佳答案

第一个问题不应该发生。如果添加eventlistener，它将在每次滚动时执行，并且我已在本地检查它是否按预期工作。但您应该将函数传递给事件侦听器，但您传递的是已执行的函数。
你可以从中返回结果然后做这样的事情

export default function checkScroll(event) {
  return window.scrollY;
}

mounted() {
    window.addEventListener("scroll", event => {
      this.scrollPosition = checkScroll(event);
    });
  }

这里是CBS的工作示例https://codesandbox.io/s/0qjkoox68v