Как передать динамическое значение мыши-прокрутки в качестве реквизита в VueJS

Question

Я использую Laravel - VueJS framework.

Я хочу определить Y-позицию прокрутки мыши и передать ее динамически в качестве реквизита компонентной навигационной панели.Для этого я создал eventListener и сохранил значение window.scrollY в переменной scrollPos внутри data ().После этого я передаю 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.

Редактировать: Это похоже на Наблюдать за изменениями window.scrollY вVuejs , но не проблема в этой проблеме уже решена, и я могу извлечь значение прокрутки мыши и отобразить его, моя проблема в том, что я хочу передать это значение компоненту, и когда это значение изменяется, значение передается вкомпонент также должен измениться (динамическое значение передается в режиме реального времени на основе прокрутки мыши).

Answer 1

Проблема, с которой вы столкнулись, не связана с Vue, это общий javascript this контекст функции.

Внутри обычной функции ее значение зависит от того, как была вызвана функция ( Подробное объяснение см. На этой странице ). В вашем случае this внутри обратного вызова, переданного функции addEventListener, будет неопределенным, потому что он был просто определен как обычная функция и не привязан ни к чему конкретному.

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 (но я думаю, что вы уже используете его)

Answer 2

Как указал Слим, я преобразовал свою функцию в функцию стрелки, и теперь она работает. Я до сих пор не понимаю, почему это изменение заставило его работать, было бы очень полезно, если бы кто-то это объяснил.

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