场景：

我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。

我的解决办法：

父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给子组件，子组件再进行渲染，可以正常获取到。

父组件代码：

import { Toast } from 'mint-ui';  import {mapState} from 'vuex'  import Related from './Related.vue'  import moment from 'moment';  export default{    name:"NewsDetails",    components:{      Related,    },    data(){      return {        id:this.$route.params.id,        topicType:"news",        contentStatus:false,        curHeight:0,        bodyHeight:5000,        hotCommentScrollTop:0      }    },    created(){      this.id=this.$route.params.id;      this.fetchData();      moment.locale('zh-cn');    },    mounted(){      setTimeout(()=>{        this.contentToggle();      },500)    },    watch: {      '$route'(to,from){        this.id=this.$route.params.id;        this.fetchData();      }    },    computed: {      ...mapState({        title: state => state.newsDetails.title,        authorName: state => state.newsDetails.authorName,        pubNews: state => state.newsDetails.pubNews,        pubName: state => state.newsDetails.pubName,        editorName: state => state.newsDetails.editorName,        createAt: state => state.newsDetails.createAt,        content: state => state.newsDetails.content,        myFavourite: state => state.newsDetails.myFavourite,        related: state => state.newsDetails.related,      })    },    filters:{      formatTime(time){        return moment(time).fromNow();      },    },    methods:{      fetchData(){        this.$store.dispatch('getDetails',this.id);      },      follow(){        Toast('登录后进行关注');        this.$router.push("/login");      },      contentToggle(){        this.curHeight=this.$refs.bodyFont.offsetHeight;        if(parseFloat(this.curHeight)>parseFloat(this.bodyHeight)){          this.contentStatus=true;        }else{          this.contentStatus=false;        }//        this.hotCommentScrollTop=this.$refs.hotComment.height;        console.log(this.hotCommentScrollTop);      },    }  }

子组件related.vue

效果如图：