Cette fois, je vais vous montrer comment résoudre le problème selon lequel la méthode vuex dans le composant parent met à jour le sous-composant d'état et le sous-composant d'état ne peut pas mettre à jour le rendu à temps. Quelles sont les précautions<.> , ce qui suit est un cas pratique, jetons-y un œil.
Scénario :
Ce que j'utilise réellement, c'est ceci, mon composant parentMa solution :
Le composant parent passe la valeur comme le composant enfantCode 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='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); }, } }
<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>
Comment utiliser le filtre dans vue
Comment utiliser vue pour déterminer la classe de dom
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!