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

Question

我正在使用 Laravel - VueJS 框架。

我想检测鼠标滚动的 Y 位置并将其作为道具动态传递给组件导航栏。为此，我创建了一个 eventListener 并将 window.scrollY 值存储到 data() 内的变量 scrollPos 中。在此之后，我将 scrollPos 作为道具传递给导航栏组件，使用 v-bind:scrollPos="scrollPos"。不幸的是，在导航栏组件中传递的值只是 0，并且在任何进一步的鼠标滚动时都不会改变。

<Navbar v-on:scroll="this.changeScrollPos" v-bind:scrollPos="scrollPos" />

mounted() {

        console.log('Component mounted.');
        window.addEventListener('scroll', function(e) {
                this.scrollPos = window.scrollY;
                console.log(this.scrollPos);
        });

},
data() {
    return {
        scrollPos: 0
    }
}, 
methods: {
    changeScrollPos() {
        console.log('Mouse scrolled');
    }
}

我将值传递给 Navbar 组件，我只是想在导航栏中显示该值，导航栏固定在页面顶部，并且具有在单击时滚动到页面该部分的路由器链接.

<nav class="nav" id="nav">
    <div class="nav-content>
        <ul class="nav-items">
            <li class="nav-item"><router-link to="/" v-scroll-to="'#section1'">{{ scrollPos }}</router-link></li>
        </ul>
    </div>
</nav>

<script>
    export default {
        props: [
            "scrollPos"
        ]
    }
</script>

我也尝试使用v-on:scroll="this.changeScrollPos()" 方法检查鼠标滚动发生任何变化后是否访问该方法，但没有。

谁能解释为什么这不起作用并帮助我将动态鼠标滚动值传递给导航栏组件。

编辑：这类似于Watch window.scrollY changes in Vuejs，但这个问题中的问题尚未解决，我可以提取鼠标滚动的值并显示它，我的问题是我想将此值传递给组件以及何时这个值改变了，传递给组件的值也应该改变（动态值被实时传递，基于鼠标滚动）。

Answer 1

正如 Slim 指出的，我将函数转换为箭头函数，现在它可以工作了。我仍然不明白为什么此更改使其起作用，如果有人解释它会非常有帮助。

mounted() {
    window.addEventListener('scroll, () => { this.scrollPos = window.scrollY; });
}

Answer 2

您遇到的问题与 Vue 无关，它是一个通用的 javascript this 函数上下文。

在常规函数中， this 的值取决于函数的调用方式（详细说明为See this page）。在您的情况下，传递给 addEventListener 函数的回调内部的 this 将是未定义的，因为它只是简单地定义为常规函数并且没有绑定到任何特定的东西。

mounted() {
  window.addEventListener('scroll', function(e) {
    this.scrollPos = window.scrollY; // this in here is undefined 
  });
}

如果您希望this 在使用常规函数时指向 vue 实例，您可以像这样使用变量范围：

mounted() {
  const THIS = this; // this points to the vue instance and we pass a 
                     // reference to the THIS variable
  window.addEventListener('scroll', function(e) {
    THIS.scrollPos = window.scrollY; // THIS here points to the vue instance
  });
}

最后一种方法是我们在 ES6 之前的传统方法。在 ES6 之后，通过包含胖箭头函数，我们能够以更简单的方式（正如您已经发现的那样）来完成它，因为胖箭头函数不绑定 this 变量：

mounted() {
  window.addEventListener('scroll', e => this.scrollPos = window.scrollY);
}

如您所见，这是一种更简洁的语法，这就是我们现在更喜欢它的原因。请注意，IE11 及以下版本不支持箭头函数，因此您需要使用 babel 之类的预编译器（但我猜您已经在使用它了）