Question

我正在使用Vue CLI，并且这些组件在已挂载的属性上具有滚动事件

comp1.vue

export default{
    data(){
        showSearchBar : 0
    },
    mounted(){
        const _self = this;
        document.querySelectorAll('.page__content').forEach(function(el){
            el.onscroll = function() {
                if (el.scrollTop >= 200) {
                    _self.showSearchBar = 1;
                }else{
                    _self.showSearchBar = 0;
                }
            }
        });
    }

}

comp2.vue

export default{
    data(){
        showUsersList : 0
    },
    mounted(){
        const _self = this;
        document.querySelectorAll('.page__content').forEach(function(el){
            el.onscroll = function() {
                if (el.scrollTop >= 200) {
                    _self.showUsersList = 1;
                }else{
                    _self.showUsersList = 0;
                }
            }
        });
    }

}

如果发生这种情况，我知道只有一个事件声明会起作用，因为我在单个页面上有多个滚动处理程序，然后我必须将它们归为一个滚动事件，所以我的问题是，如何将这些处理程序合并到一个滚动事件中这样才能使它们全部工作？ Vue对此有办法吗？

Answer 1

执行此操作的方法之一是在app.vue中包含逻辑，在该逻辑中还加载<router-view>标签：

然后，我们将道具传递到各个页面，在这里我们可以使用它：

App.vue

<template>
    <div class="page__content">
        <router-view :scrolled="scrolled"/>
    </div>
</template>
<script>
export default{
    data(){
        scrolled: false
    },
    mounted(){
        // Its better use a vue ref here
        document.querySelectorAll('.page__content').forEach((el) => {
            el.onscroll = () => {
                if (el.scrollTop >= 200) {
                    this.scrolled = true;
                } else {
                    this.scrolled = false;
                }
            }
        });
    }

}
</script>

comp2.vue

export default{
    props: {
        scrolled: {
            type: Boolean,
            required: true,
        },
    },
    computed: {
        showUsersList() {
            if(this.scrolled) {
                return 1;
            } else {
                return 0;
            }
        },
    },
    mounted(){
    }
}

将所有滚动处理程序合并到所有组件中的一个

1 个答案: