So lösen Sie das Problem, dass die Vuex-Methode in der übergeordneten Komponente den Status aktualisiert und die untergeordnete Komponente nicht rechtzeitig aktualisiert und gerendert werden kann

In diesem Artikel wird hauptsächlich die perfekte Lösung für das Problem vorgestellt, dass die Vuex-Methode in der übergeordneten Komponente den Status aktualisiert und die untergeordnete Komponente nicht rechtzeitig aktualisiert und gerendert werden kann. Freunde in Not können sich auf Folgendes beziehen:

Szenario:

Was ich tatsächlich verwende, ist dies. Meine übergeordnete Komponente bezieht sich auf die untergeordnete Komponente, die die Methode aufruft, um die Seitendetails und Aktualisierungen abzurufen Der Statuswert bezieht sich, und die untergeordnete Komponente wird basierend auf dem zugehörigen Nachrichteninhalt gerendert, aber wenn die Seite geöffnet wird, wird die Unterkomponente beim Rendern nicht den aktualisierten zugehörigen Wert erhalten Der Wert wird in der Unterkomponente beobachtet, die relevanten Nachrichten der Unterkomponente können nicht gerendert werden.

Meine Lösung:

Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente, und wenn die übergeordnete Komponente die Methode von ausführt Seitendetails abrufen Danach wird der entsprechende Statuswert aktualisiert und dann an die Unterkomponente übergeben, die dann gerendert wird und normal abgerufen werden kann.

Code der übergeordneten Komponente:

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

Untergeordnete Komponente related.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>

Der Effekt ist wie im Bild gezeigt:

Das Obige ist der gesamte Inhalt davon Ich hoffe, dass dieser Artikel zum Lernen aller nützlich sein wird. Wenn Sie Hilfe benötigen, schauen Sie sich bitte die chinesische PHP-Website an, um weitere verwandte Inhalte zu erhalten!

Verwandte Empfehlungen:

Wie Vue den Effekt einer Vorwärtsaktualisierung und einer Rückwärtsaktualisierung ohne Aktualisierung erzielt

Über die Implementierung von Vue Kommentar-Framework (Implementierung der übergeordneten Komponente)

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Vuex-Methode in der übergeordneten Komponente den Status aktualisiert und die untergeordnete Komponente nicht rechtzeitig aktualisiert und gerendert werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!