Processing parent component method updates to child components that cannot be rendered-JS Tutorial-php.cn

Processing parent component method updates to child components that cannot be rendered

php中世界最好的语言

Release： 2018-06-06 11:00:19

Original

1577 people have browsed it

This time I will bring you some precautions when dealing with parent component method updates until the child component cannot be rendered, and what are the precautions when dealing with parent component method updates until the child component cannot be rendered. The following is a practical case, let's take a look.

Scenario:

What I actually use is this. My parent component refers to the child component related, and the parent component calls to get the page details. method, the state value related is updated, and the sub-component renders related news content based on the related. However, when the page is opened, the sub-component is always loaded first. The sub-component has not obtained the updated related value when rendering, even if the sub-component is rendered. Changes in the watch value in the component still cannot render the relevant news content of the sub-component.

My solution:

The parent component passes the value to the child component. When the parent component executes the method of getting page details, state The related value is updated and then passed to the subcomponent, which is then rendered and can be obtained normally.

Parent component code:


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);
   },
  }
 }

Copy after login

Sub component related.vue

Copy after login

The effect is as shown:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!