Project scenario:
In the parent component loop data list, there is an event in the list that clicks to open a child component;
The value of the child component to be updated in the parent component
Problem description
In the parent component loop data list, click to open a child component. After A data opens the child component, B data opens the child component. At this time, A data will be cached in the child component.
Cause analysis:
The subcomponent is not refreshed, but it is still stuck in the previous data cache
Solution:
Add key value to the component
Principle: After the key value changes, the component will be automatically re-rendered
The key in vue is mainly used to efficiently update the dom. It can also be used to force the replacement of elements/components instead of reusing it, and to complete the triggering of the component's life cycle hook, triggering the transition.
<template>
<el-button @click="btnEvent">Refresh subcomponents</el-button>
<child :key="datekey"></child>
</template>
<script>
export default{
data(){
return {
datekey:()
}
},
methods:{
btnEvent(){
//If the datekey is updated here, the component will be refreshed = ()
}
}
}
</script>Summarize
This is the article about vue refreshing subcomponents, resetting components and reloading subcomponents. For more related content on vue refreshing subcomponents, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!