Nuxt.js：如何定義組件的mount（）中使用的通用方法，以及如何更改組件的數據

Question

我想按以下方式檢測組件的mount（）中的滾動事件，並更改組件中使用的數據。

·零件

<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
}

在這種情況下有兩個問題

我想每次滾動都執行此功能，但是該功能僅在第一次滾動時執行
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