1. The function to be implemented
requests a piece of html code through ajax to replace the img tag in the code with himg
himg as a custom vue component used to add pictures to img to click to enlarge and handle failed image loading
2. The idea defines an asynchronous component as hhtml
components: {
"hhtml": (resolve)=>{
that.getdata().then((a)=>{
resolve ({
components: {
"himg": hImg
},
template: "<div>"+a+"</div>"
})
})
}
}
that here is the parent of this component
there is a method getdata function in the parent component that returns the html of the himg tag after the replace img tag is returned for Promise
execute the discovery successfully and hhtml has successfully obtained the data
3. Found the problem
thought the problem had been solved here, but found that even if the component did not change after $router.push and $router.go (- 1) and did not re-execute that.getdata () to get the values in the data component
Q: why did this happen? How to solve?
Nov 22
it is understood that Vue triggers the factory function only when the component needs to be rendered, and the results are cached for future re-rendering.