场景：
我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。
我的解决办法：
父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给子组件，子组件再进行渲染，可以正常获取到。
父组件代码：
<template> <p id="newsdetails"> <mt-header title="详情"> <router-link to="/" slot="left"> <mt-button icon="back"></mt-button> </router-link> </mt-header> <p class="details clearfloat"> <h1 class="titlefont"> {{ title }} </h1> <p class="clearfloat sourcewrap"> <ul class="sourcefont"> <li v-if="(pubnews==true)"> <span class="source">{{pubname}}</span> </li> <li> <span class="authorname">{{authorname}}</span> <span class="time">{{createat|formattime}}</span> </li> </ul> <span v-if="(pubnews==true)" class='btnfollow' @click="follow">关注</span> </p> <p class="bodyfont clearfloat" id="bodyfont" ref="bodyfont" :class="{bodyheight:contentstatus}"> <p v-html="content"></p> <p class="editor" v-if="editorname">责任编辑：{{editorname}}</p> </p> <p class="contenttoggle" @click="contentstatus=!contentstatus" v-if="contentstatus">阅读全文</p> <related :related="related"></related><!--重点是这里 父组件向子组件传值--> </p> </p> </template>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
<template> <p v-if="lists.length>0> <p class="tagtitle"><span>相关新闻</span></p> <p class="listitem" v-if="(item.type=='little')" v-for="(item,index) in lists" :to="{name:'details',params:{id:item.id}}" :key="index" @click="browserdetection()"> <p class="listimg1"> <!--<img :src="{lazy==loaded?item.thumb[0]:lazy==loading?'../../assets/images/little_loading.png':lazy==error?'../../assets/images/little_loading.png'}" alt="" v-lazy="item.thumb[0]">--> <img :src="item.thumb[0]" alt="" v-lazy="item.thumb[0]"> </p> <p class='titlebox1'> <p class="listtitle">{{item.title}}</p> <p class="titleinfo"> <span class="openapp">打开唐人家</span> <span v-if="item.top==true" class="totop">置顶</span> <!--<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-dianzan" rel="external nofollow" ></use> </svg>--> <span class="like">阅读 {{item.read}}</span> <span class="time">{{item.createat|formattime}}</span> </p> </p> </p> </p></template><script> import {mapactions, mapstate, mapgetters} from 'vuex' import moment from 'moment' export default{ data(){ return { lists: [], id:this.$route.params.id, } }, props:{ related:array //重点是这里 }, created(){ moment.locale('zh-cn'); }, /*computed: { ...mapstate({ related: state => state.newsdetails.related, }) },*/ filters:{ formattime(time){ return moment(time).fromnow(); }, }, methods:{ }, watch: { related (val) { this.lists = val; }, '$route'(to,from){ this.id=this.$route.params.id } } }</script>
效果如图：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
微信小程序怎样做出弹出框功能
vue怎样切换国家语言
以上就是处理父组件方法更新到子组件无法渲染的详细内容。