我将主视图页面用作main.vue,并将子页面加载到main.vue中。
我不知道main.vue和child.vue之间的数据通信方式。
我在这里提供我尝试过的代码。请帮助我解决此问题。
<template>
<el-main class="contentPanel" v-on:scroll.native="checkPanelScrollTop">
<router-view :user="user" name="adminPortal" />
</el-main> // this element having vertical scroll
</template>
<script>
export default{
name: 'mainPage',
data(){
isEnableStickyPanel: false,
},
methods: {
checkPanelScrollTop($event) {
let element = $event.target
if(element.scrollTop >= 115){
this.isEnableStickyPanel = true
}
}
}
}
</script>
child.vue
<template>
<div :class="{'sticky-panel': enableStickyPanel}"> // apply sticky-panel css class based on parent scroll
some code here ...
...
...
</div>
</template>
<script>
export default {
name: 'childPage',
data() {
},
computed: {
enableStickyPanel(){
return this.$prent.isEnableStickyPanel // <-- it is not working
}
}
}
</script>
<style>
.sticky-panel{
position: fixed
}
</style>
我没有得到this.$prent.isEnableStickyPanel
的价值。我的问题是,滚动顶部值超过115px时,如何获取isEnableStickyPanel值?谢谢