vue刷新子組件、重置組件以及重新加載子組件項(xiàng)目實(shí)戰(zhàn)記錄
項(xiàng)目場(chǎng)景：
在父組件循環(huán)數(shù)據(jù)列表中，列表中有事件點(diǎn)擊打開(kāi)某個(gè)子組件；
父組件中要更新子組件的值
問(wèn)題描述
在父組件循環(huán)數(shù)據(jù)列表中，點(diǎn)擊打開(kāi)某個(gè)子組件，A數(shù)據(jù)打開(kāi)子組件后，B數(shù)據(jù)再打開(kāi)子組件，此時(shí)子組件中會(huì)有緩存A數(shù)據(jù)。
原因分析：
子組件沒(méi)有刷新，還是停留在上一個(gè)數(shù)據(jù)緩存
解決方案：
給組件添加key值
原理：key值變化之后，會(huì)自動(dòng)重新渲染組件
vue中的key的作用主要是為了高效的更新dom, 它也可以用于強(qiáng)制替換元素/組件而不是重復(fù)使用它，完成的觸發(fā)組件的生命周期鉤子，觸發(fā)過(guò)渡。
<template>
<el-button @click="btnEvent">刷新子組件</el-button>
<child :key="datekey"></child>
</template>
<script>
export default{
data(){
return {
datekey:Date.now()
}
},
methods:{
btnEvent(){
//這里更新了datekey ，組件就會(huì)刷新
this.datekey = Date.now()
}
}
}
</script>總結(jié)
到此這篇關(guān)于vue刷新子組件、重置組件以及重新加載子組件的文章就介紹到這了,更多相關(guān)vue刷新子組件重置組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive (下)
這篇文章主要介紹了淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(下),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
elementUI el-input 只能輸入正整數(shù)驗(yàn)證的操作方法
這篇文章主要介紹了elementUI el-input 只能輸入正整數(shù)驗(yàn)證,本文給大家詳細(xì)講解對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
在Vue3項(xiàng)目中安裝和配置Three.js的操作代碼
Three.js是一個(gè)輕量級(jí)的WebGL封裝庫(kù),用于在瀏覽器中渲染復(fù)雜的3D圖形,它提供了便捷的API,可以快速構(gòu)建3D場(chǎng)景、對(duì)象和動(dòng)畫(huà),Vue.js是一個(gè)漸進(jìn)式JavaScript框架,擅長(zhǎng)構(gòu)建用戶界面,本文給大家介紹了在Vue3項(xiàng)目中安裝和配置Three.js的操作,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Vue分頁(yè)查詢?cè)趺磳?shí)現(xiàn)，使用vue實(shí)現(xiàn)分頁(yè)的邏輯并不復(fù)雜，接收后端傳輸過(guò)來(lái)的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁(yè)的數(shù)據(jù)量就可以計(jì)算出一共可以分成幾頁(yè)2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)多標(biāo)簽選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為pdf(分頁(yè)導(dǎo)出、不分頁(yè)導(dǎo)出及分模塊導(dǎo)出)
在實(shí)際應(yīng)用中可能用戶希望將系統(tǒng)中一個(gè)頁(yè)面展示的所有數(shù)據(jù)報(bào)表,用PDF的文件格式下載下來(lái),以便于其他用途,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為pdf(分頁(yè)導(dǎo)出、不分頁(yè)導(dǎo)出及分模塊導(dǎo)出)的相關(guān)資料,需要的朋友可以參考下2024-06-06
Vue預(yù)覽圖片和視頻的幾種實(shí)現(xiàn)方式
本文主要介紹了Vue預(yù)覽圖片和視頻的幾種實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue3+elementPlus實(shí)現(xiàn)年份選擇器
這篇文章主要為大家詳細(xì)介紹了vue3如何通過(guò)elementPlus實(shí)現(xiàn)一個(gè)簡(jiǎn)單的年份選擇器,文中的示例代碼講解詳細(xì),需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue2.0表單校驗(yàn)組件vee-validate的使用詳解
本篇文章主要介紹了Vue2.0表單校驗(yàn)組件vee-validate的使用詳解，詳細(xì)的介紹了vee-validate使用教程。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05