<router-view>和子页面之间如何通信数据

时间:2019-09-26 11:23:40

标签: vue.js

我将主视图页面用作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值?谢谢

0 个答案:

没有答案