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

Question

我想如下在组件的mounted()中检测scroll事件，改变组件中使用的数据。

・组件

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

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

・utils/checkScroll.js

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

这个案例有两个问题

1.我想每次滚动都执行这个函数，但是这个函数只在第一次滚动时执行
2.组件内this.scrollPosition的值不变。

如果是这样，它将如何运作？

Answer 1

第一个问题不应该发生。如果你添加 eventListener 它将在你每次滚动时执行，我已经在本地检查它按预期工作。但是您应该将一个函数传递给事件监听器，但是您传递的是已经执行的函数。

你可以从它返回结果并做这样的事情

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

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

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