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

Posted 2021-03-27

我正在使用Laravel - VueJS框架。

我想检测鼠标滚动的Y位置，并将其作为prop动态传递给组件Navbar。为此，我创建了一个eventListener并将window.scrollY值存储到data（）中的变量scrollPos中。在此之后，我将scrollPos作为支持传递给Navbar组件，使用v-bind：scrollPos =“scrollPos”。不幸的是，Navbar组件中传递的值仅为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()"方法检查鼠标滚动中的任何更改后是否访问此方法，但事实并非如此。

有人可以解释为什么这不起作用，并帮助我将动态鼠标滚动值传递给Navbar组件。

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

答案

你遇到的问题不是Vue相关的，它是一般的javascript this函数上下文。

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

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

如果你想在使用常规函数时使用this指向vue实例，你可以像这样使用变量scope：

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之后，通过包含胖箭头函数，我们能够以更简单的方式（正如您已经发现的那样）完成它，因为胖箭头函数不绑定此变量：

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

正如您所看到的，它是一种更清晰的语法，这就是我们现在更喜欢它的原因。请注意，IE11及以下版本不支持箭头功能，所以你需要使用像babel这样的预编译器（但我想你已经在使用它了）

另一答案

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

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