vue刷新子組件、重置組件以及重新加載子組件項(xiàng)目實(shí)戰(zhàn)記錄
更新時間：2023年12月07日 09:29:19 作者：Jocelyn_書
在vue開發(fā)中出于各種目的,我們常常需要讓組件重新加載渲染,這篇文章主要給大家介紹了關(guān)于vue刷新子組件、重置組件以及重新加載子組件的相關(guān)資料,需要的朋友可以參考下
項(xiàng)目場景：
在父組件循環(huán)數(shù)據(jù)列表中，列表中有事件點(diǎn)擊打開某個子組件；
父組件中要更新子組件的值
問題描述
在父組件循環(huán)數(shù)據(jù)列表中，點(diǎn)擊打開某個子組件，A數(shù)據(jù)打開子組件后，B數(shù)據(jù)再打開子組件，此時子組件中會有緩存A數(shù)據(jù)。
原因分析：
子組件沒有刷新，還是停留在上一個數(shù)據(jù)緩存
解決方案：
給組件添加key值
原理：key值變化之后，會自動重新渲染組件
vue中的key的作用主要是為了高效的更新dom, 它也可以用于強(qiáng)制替換元素/組件而不是重復(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)文章
proxy代理不生效以及vue?config.js不生效解決方法
在開發(fā)Vue項(xiàng)目過程中,使用了Proxy代理進(jìn)行數(shù)據(jù)劫持,但是在實(shí)際運(yùn)行過程中發(fā)現(xiàn)代理并沒有生效,也就是說數(shù)據(jù)并沒有被劫持,這篇文章主要給大家介紹了關(guān)于proxy代理不生效以及vue?config.js不生效解決方法的相關(guān)資料,需要的朋友可以參考下2023-11-11
Vue.config.productionTip?=?false?不起作用的問題及解決
這篇文章主要介紹了Vue.config.productionTip?=?false為什么不起作用,本文給大家分析問題原因解析及解決方案，需要的朋友可以參考下2022-11-11
Element樹形控件整合帶圖標(biāo)的下拉菜單(tree+dropdown+input)
Element UI 官網(wǎng)提供的樹形控件包含基礎(chǔ)的、可選擇的、自定義節(jié)點(diǎn)內(nèi)容的、帶節(jié)點(diǎn)過濾的以及可拖拽節(jié)點(diǎn)的樹形結(jié)構(gòu)，本文實(shí)現(xiàn)了樹形控件整合帶圖標(biāo)的下拉菜單，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了vue項(xiàng)目中使用iconfont方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vuex是專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex中5個屬性使用方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue +elementui 導(dǎo)入CSV文件的方式
封裝一個公共js方法,使用papaparse解析CSV文件且返回?cái)?shù)組格式,下面通過示例代碼介紹vue +elementui 導(dǎo)入CSV文件的方式,感興趣的朋友一起看看吧2024-04-04
這篇文章主要為大家介紹了vue條件渲染列表渲染原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了Vue 修改網(wǎng)站圖標(biāo)的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
基于Ant-design-vue的Modal彈窗 封裝 命令式與Hooks用法
這篇文章主要給大家介紹了基于Ant-design-vue的Modal彈窗封裝命令式與Hooks用法，文中有詳細(xì)的代碼示例，具有一定的參考價值，感興趣的同學(xué)可以借鑒閱讀2023-06-06
這篇文章主要介紹了Vue中h函數(shù)的使用和虛擬DOM的概念,h函數(shù)是Vue中的createElement方法,用于創(chuàng)建虛擬DOM,虛擬DOM是一個普通的JavaScript對象,包含tag,props,children三個屬性,通過diff算法,可以追蹤DOM的變化,只對變化的DOM進(jìn)行操作,從而提升性能2025-12-12