Comment résoudre le problème selon lequel la méthode vuex dans le composant parent met à jour l'état et le composant enfant ne peut pas être mis à jour et rendu à temps

Cet article présente principalement la solution parfaite au problème selon lequel la méthode vuex dans le composant parent met à jour l'état et le composant enfant ne peut pas être mis à jour et rendu à temps. Les amis dans le besoin peuvent se référer à ce qui suit

. Scénario :

Ce que j'utilise réellement, c'est ceci. Mon composant parent fait référence au composant enfant associé. Le composant parent appelle la méthode pour obtenir les détails de la page, les mises à jour. la valeur d'état est associée et le composant enfant est rendu associé en fonction du contenu d'actualités associé, mais lorsque la page est ouverte, le sous-composant est toujours chargé en premier. Le sous-composant n'a pas obtenu la valeur associée mise à jour lors du rendu. la valeur est surveillée dans le sous-composant, les nouvelles pertinentes du sous-composant ne peuvent pas être restituées.

Ma solution :

Le composant parent transmet la valeur au composant enfant, et lorsque le composant parent exécute la méthode de obtenir les détails de la page Après cela, la valeur d'état associée est mise à jour puis transmise au sous-composant, qui est ensuite rendu et peut être obtenu normalement.

Code du composant parent :

<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=&#39;btnFollow&#39; @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 &#39;mint-ui&#39;;
 import {mapState} from &#39;vuex&#39;
 import Related from &#39;./Related.vue&#39;
 import moment from &#39;moment&#39;;
 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(&#39;zh-cn&#39;);
  },
  mounted(){
   setTimeout(()=>{
    this.contentToggle();
   },500)
  },
  watch: {
   &#39;$route&#39;(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(&#39;getDetails&#39;,this.id);
   },
   follow(){
    Toast(&#39;登录后进行关注&#39;);
    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);
   },
  }
 }

Composant enfant lié.vue

<template>
  <p v-if="lists.length>0">
    <p class="tagTitle"><span>相关新闻</span></p>
    <p class="listItem" v-if="(item.type==&#39;little&#39;)" v-for="(item,index) in lists" :to="{name:&#39;details&#39;,params:{id:item.id}}" :key="index" @click="browserDetection()">
     <p class="listImg1">
      <!--<img :src="{lazy==loaded?item.thumb[0]:lazy==loading?&#39;../../assets/images/little_loading.png&#39;:lazy==error?&#39;../../assets/images/little_loading.png&#39;}" alt="" v-lazy="item.thumb[0]">-->
      <img :src="item.thumb[0]" alt="" v-lazy="item.thumb[0]">
     </p>
     <p class=&#39;titleBox1&#39;>
      <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 &#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>

L'effet est comme indiqué ci-dessous :

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il vous sera utile. L'apprentissage de tout le monde est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment vue obtient l'effet d'actualisation avant et arrière sans actualisation

À propos de la mise en œuvre de Vue cadre de commentaires (implémentation du composant parent)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!