Question

我正在使用Laravel-VueJS框架。

我想检测鼠标滚动的Y位置并将其作为道具动态传递给组件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，但尚未解决此问题中的问题，我可以提取鼠标滚动的值并显示它，我的问题是我想将此值传递给组件当此值更改时，传递给组件的值也应更改（基于鼠标滚动，动态值将实时传递）。

Answer 1

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

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

Answer 2

您遇到的问题与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实例，则可以像这样使用变量作用域：

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之后，由于包含了fat arrow函数，我们能够以一种更简单的方式（如您已经发现的）完成此任务，因为fat arrow函数没有绑定此变量：

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

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

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

2 个答案: