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