處理父元件方法更新到子元件無法渲染

這次帶給大家處理父元件方法更新到子元件無法渲染，處理父元件方法更新到子元件無法渲染的注意事項有哪些，下面就是實戰案例，一起來看一下。

場景：

我實際用到的是這樣的，我父元件引用子元件related,父元件呼叫取得頁面詳情的方法，更新了state值related，子組件根據該related來渲染相關新聞內容，但是頁面打開的時候總是先加載子組件，子組件在渲染的時候還沒有獲取到更新之後的related值，即使在子元件中watch該值的變化仍無法渲染出來子元件的相關新聞內容。

我的解決方法：

父元件像子元件傳值，當父元件執行了取得頁面詳情的方法之後，state值related更新，然後傳給子元件，子元件再渲染，可以正常取得。

父元件程式碼：

<template>
 <p>
  <mt-header>
   <router-link>
    <mt-button></mt-button>
   </router-link>
  </mt-header>
  </p>
<p>
   </p>
<h1>
    {{ title }}
   </h1>
   <p>
    </p>
<ul>
     <li>
      <span>{{pubName}}</span>
     </li>
     <li>
      <span>{{authorName}}</span>
      <span>{{createAt|formatTime}}</span>
     </li>
    </ul>
    <span>关注</span>
   
   <p>
    </p>
<p></p>
    <p>责任编辑：{{editorName}}</p>
   
   <p>阅读全文</p>
   <related></related>
　　　　<!--重点是这里 父组件向子组件传值-->
   </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>0">
    </p>
<p><span>相关新闻</span></p>
    <p>
     </p>
<p>
      <!--<img src="/static/imghwm/default1.png"  data-src="{lazy==loaded?item.thumb[0]:lazy==loading?&#39;../../assets/images/little_loading.png&#39;:lazy==error?&#39;../../assets/images/little_loading.png&#39;}"  class="lazy"  : alt="" v-lazy="item.thumb[0]">-->
      <img  src="/static/imghwm/default1.png" data-src="item.thumb[0]" class="lazy" alt="處理父元件方法更新到子元件無法渲染" >
     </p>
     <p>
      </p>
<p>{{item.title}}</p>
      <p>
       <span>打开唐人家</span>
       <span>置顶</span>
       <!--<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
       </svg>-->
       <span>阅读 {{item.read}}</span>
       <span>{{item.createAt|formatTime}}</span>
      </p>
    
   
  
</template>
<script>
 import {mapActions, mapState, mapGetters} from &#39;vuex&#39;
 import moment from &#39;moment&#39;
 export default{
  data(){
   return {
    lists: [],
    id:this.$route.params.id,
   }
  },
  props:{
    related:Array  //重点是这里
  },
  created(){
   moment.locale(&#39;zh-cn&#39;);
  },
  /*computed: {
   ...mapState({
    related: state => state.newsDetails.related,
   })
  },*/
  filters:{
   formatTime(time){
    return moment(time).fromNow();
   },
  },
  methods:{
  },
  watch: {
   related (val) {
    this.lists = val;
   },
   &#39;$route&#39;(to,from){
    this.id=this.$route.params.id
   }
  }
 }
</script>

效果如圖：

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

微信小程式怎樣做出彈出框功能

Vue怎麼切換國家語言

以上是處理父元件方法更新到子元件無法渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！